{"id":256806,"date":"2017-07-24T07:32:36","date_gmt":"2017-07-24T14:32:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=256806"},"modified":"2017-07-24T11:50:24","modified_gmt":"2017-07-24T18:50:24","slug":"simple-server-side-rendering-routing-page-transitions-nuxt-js","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simple-server-side-rendering-routing-page-transitions-nuxt-js\/","title":{"rendered":"Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js"},"content":{"rendered":"
A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started!<\/p>\n
<\/p>\n
You might have heard people talking about server side rendering as of late. We looked at one method to do that with React<\/a> recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article<\/a> does really well going into more depth on the subject. My favorite takeaway is:<\/p>\n By rendering on the server, you can cache the final shape of your data.<\/p><\/blockquote>\n Instead of grabbing JSON or other information from the server, parsing it, then using JavaScript to create layouts of that information, we’re doing a lot of those calculations upfront, and only sending down the actual HTML, CSS, and JavaScript that we need. This can reap a lot of benefits with caching, SEO, and speed up our apps and sites.<\/p>\n Server side rendering sounds pretty nice, but you’re probably wondering if it’s difficult to set up. I’ve been using Nuxt.js<\/a> for my Vue applications lately and found it surprisingly simple to work with. To be clear: you don’t need to use Nuxt.js in particular to do server side rendering. I’m just a fan of this tool for many reasons. I ran some tests last month and found that Nuxt.js had even higher lighthouse scores<\/a> out of the gate than Vue’s PWA template, which I thought was impressive.<\/p>\n Nuxt.js is a higher-level framework that you can use with a CLI command that you can use to create universal Vue applications. Here are some, not all, of the benefits:<\/p>\n Let’s set up a basic application with some routing to see the benefits for ourselves.<\/p>\n The first thing we need to do if you haven’t already is download Vue’s CLI. You can do so globally with this command:<\/p>\n You will only need to do this once, not every time you use it.<\/p>\n Next, we’ll use the CLI to scaffold a new project, but we’ll use Nuxt.js as the template:<\/p>\n You’ll see the progress of the app being built and it will give you a dedicated development server to check out: http:\/\/127.0.0.1:3000\/. This is what you’ll see right away (with a pretty cool little animation):<\/p>\nWhat is Nuxt.js?<\/h3>\n
\n
Getting Set up<\/h3>\n
npm install -g vue-cli\r\n\r\n# ... or ...\r\n \r\nyarn add global vue-cli<\/code><\/pre>\n
vue init nuxt\/starter my-project\r\ncd my-project\r\nyarn # or... npm install\r\nnpm run dev<\/code><\/pre>\n