Server Side Rendering with Nuxt.js

Server Side Rendering with Nuxt.js

• 1.
  Server Side Renderingwith Nuxt.js
• 2.
  Jessie Barnett Senior Engineer@ Axuall https://jessie.codes https://github.com/jessie-codes
• 3.
  Intro to Nuxt.js
• 4.
  What is Nuxt.js? Nuxt.jsis a progressive Vue.js framework. Nuxt bundles Vue and Vuex into an opinionated framework optimized for static site generation or server side rendering. Nuxt is modular and highly configurable, lending itself to multiple use cases.
• 5.
  Creating a newNuxt App npx create-nuxt-app <project name> The wizard will ask you for: ● Project Name ● Project Description ● Author Name ● Package Manager ● UI Framework ● Server Framework ● Module Support (axios, PWA) ● Linting Tools ● Test Framework ● Rendering Mode (SPA or Universal[SSR]) ● Development Tools
• 6.
  Folder Structure ● /assets- contains your un-compiled assets such as Stylus or Sass files, images, or fonts. ● /components - contains your Vue.js Components. You can't use either asyncData or fetch in these components ● /layouts - includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar). ● /middleware - contains your Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts). ● /pages - contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router. ● /plugins - contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the place to register components globally and to inject functions or constants. ● /server - directory contains server logic. This directory is only generated if you choose a server framework. ● /static - directory is directly mapped to the server root (/static/robots.txt is accessible under http://localhost:3000/robots.txt) and contains files that likely won't be changed (e.g. the favicon) ● /store - contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store.
• 7.
  Routing
• 8.
  Automatic Routes Nuxt automaticallygenerates vue-router configuration based on your file tree of Vue files inside of the pages folder. pages/ --| user/ -----| index.vue -----| one.vue --| index.vue router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] }
• 9.
  Dynamic Routes To definea dynamic route with a parameter, you need to define a .vue file or a folder prefixed by an underscore. pages/ --| user/ -----| _id.vue --| _book/ -----| review.vue --| author/ -----| _id.vue -----| index.vue /user/:id? /:book/review /author /author/:id
• 10.
  Dynamic Routes -Static Generation Nuxt will not automatically create pages for dynamic routes when generating static websites. Routes can be configured via the generate property in the nuxt configuration. In the case that pages are based off of dynamic data, you can use a function that returns a promise instead. export default { generate: { routes: [ '/users/1', '/users/2', '/users/3' ] } }
• 11.
  Middleware
• 12.
  Middleware Middleware lets youdefine custom functions that can be run before rendering. Can be set either for a group of pages, or a single page. Middleware functions receive the context object as an argument. Each middleware function should be in its own file in the middleware folder - the name of the file will be used in the config. router: { middleware: 'stats' }
• 13.
  Middleware - TrackPage Views export default function ({ route }) { return axios.post('http://my-stats-api.com', { url: route.fullPath }) }
• 14.
  Context
• 15.
  Context Object -Universal Keys (Part One) ● app - The root Vue instance options that includes all your plugins. For example, when using i18n, you can get access to $i18n through context.app.i18n. ● store - Vuex Store instance. Available only if the vuex store is set. ● route - Vue Router route instance. ● params - Alias of route.params. ● query - Alias of route.query. ● env - Environment variables set in nuxt.config.js. ● isDev - Boolean to let you know if you're in dev mode, can be useful for caching some data in production.
• 16.
  Context Object -Universal Keys (Part Two) ● isHMR - Boolean to let you know if the method/middleware is called from webpack hot module replacement (true only on client-side in dev mode). ● redirect - Use this method to redirect the user to another route, the status code is used on the server-side, defaults to 302. redirect([status,] path [, query]). ● Error - Use this method to show the error page: error(params). The params should have the properties statusCode and message.
• 17.
  Context Object -Server Side Keys ● req - Request from the Node.js server. If Nuxt is used as a middleware, the request object might be different depending on the framework you're using. Not available via nuxt generate. ● res - Response from the Node.js server. If Nuxt is used as a middleware, the res object might be different depending on the framework you're using. Not available via nuxt generate. ● beforeNuxtRender - Use this method to update __NUXT__ variable rendered on client-side, the fn (can be asynchronous) is called with { Components, nuxtState }.
• 18.
  Client Side Keys ●from - The route navigated from. ● nuxtState - Nuxt state, useful for plugins which uses beforeNuxtRender to get the nuxt state on client-side before hydration. Available only in universal mode.
• 19.
  Using Client/Server Keys if(process.server) { //code here will only run on the server } if (process.client) { //code here will only on in the browser }
• 20.
  Views
• 21.
  Nuxt View Hooks Nuxthas additional hooks on components that have been designated as views (by being located in the pages folder). ● asyncData - is called every time before loading the page component and is only available for such. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives the context object as the first argument, you can use it to fetch some data and return the component data. ● fetch - if set, is called every time before loading the component (only for page components). It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. As opposed to the asyncData, it is used populate the Vuex store instead of component data. ● head - sets the HTML Head tags for the current page. This method is also available in layout components.