Nuxt.js service-Side rendering practices, from development to deployment

Sentiment

After several Saturday Sunday attempts, finally solved the service-side rendering of the common problems, but also successfully persuaded the company to adopt a new project to use the front-end separation of the solution, when the SEO is not the problem, perhaps we engage in the front-end of the real spring, which also encountered some small pits, Nuxt.js official still very to force, mention issue after very positive to give help, once again thank Nuxt.js development team.

Solved Problem Routing Authentication

The first stumbling block is the authentication issue at the time of landing, and how to save tokens locally. The official use of express-session to solve this problem, but the backend also need to use Nodejs, and our company uses PHP. Then I thought maybe a cookie could try, so I did it:

app.Post('/api/login ', function(req,Res{  //Background to verify user information and return tokenAsyncfunction Login(){    Const {Data} =AwaitAxiosserver.Post('/login ', req.Body)returnData}  Login(). Then(function(data){    //Store tokens in a cookie    Const {Token} =Dataif(token){      Res.Cookies(' token ',Token, {        MaxAge: 60000 *  - *  -      })}    //return intact    return Res.JSON(data)})})

I put the login request with Nodejs to do a forwarding, the user submitted data to the back end, the back end of the token returned to the cookie, and then the data back to the front end, the front end and the Vuex to save the token state, so token in both the cookie and memory, Refreshing the page is also normal
Front-End Storage tokens:

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {    if (req.cookies && req.cookies.token) {      // 存储token      commit(‘SET_USER‘, req.cookies.token)    }  },  // SET_USER  SET_USER (state, token) {    state.token = token  },

So this problem is solved, all the data that needs to be stored locally can be solved

Rendering data within a component

Another small problem is how the data in the components is rendered. In Nuxt.js, only the components in the page are available fetch and asyncData methods, so when we use layout layouts page, if the component needs to request data, it cannot render, the workaround is to nuxtServerInit initialize the data within the component in the method, as follows:

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {    // 初始化组件内的数据    await dispatch(‘ADMIN_INFO‘)    await dispatch(‘TAGS‘)    await dispatch(‘ARCHIVES‘)  }

This allows the data in the component to render successfully.

Use of filters

The personal feeling of Nuxt.js's plugins design is still very human, it is simply not easy to use. To create a new filters.js in plugins, the filter can play like this:

import Vue from ‘vue‘// 时间格式化export function formatDate (date, fmt) {  let newDate = new Date(date)  if (/(y+)/.test(fmt)) {    fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + ‘‘).substr(4 - RegExp.$1.length))  }  let o = {    ‘M+‘: newDate.getMonth() + 1,    ‘d+‘: newDate.getDate(),    ‘h+‘: newDate.getHours(),    ‘m+‘: newDate.getMinutes(),    ‘s+‘: newDate.getSeconds()  }  for (let k in o) {    if (new RegExp(`(${k})`).test(fmt)) {      let str = o[k] + ‘‘      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))    }  }  return fmt}let filters = {  formatDate}Object.keys(filters).forEach(key => {  Vue.filter(key, filters[key])})export default filters

Then register in the Nuxt.config.js:

  plugins: [    ‘~plugins/filters.js‘  ]

In the component it is possible to use this happy:

<!-- 时间格式化 --><div> <span>{{date | formatDate(‘yyyy-MM-dd‘)}}</span></div>

There is a lot of fun not to say, the article is too long, I guess I don't want to see

Project deployment

About August, I wrote several articles about how to deploy the Nodejs project:
Nodejs Server Deployment Tutorial One
Nodejs Server Deployment Tutorial Two, deploying the Vue project to the online
Nodejs Server Deployment Tutorial III, deploying NODE+VUE+MONGODB-based projects
Nodejs Server Deployment Tutorial Four, deploying an SSL certificate, upgrading to HTTPS
Over time, some bugs have been fixed, some errors have been found, and the overall write is too messy. So smoked a day, on the new server side of the practice side record, the above several articles with Gitbook summed up a bit

Conclusion

Do not put a demo on the look is not good, based on nuxt.js of Open source project is not too much, the following is my time spent one months of spare times to do small projects, before is based on Vuejs development, and now with Nuxt.js to reconstruct, to solve the service-side rendering of the common problems
GitHub
Gitbook

Nuxt.js service-Side rendering practices, from development to deployment