Introduction to SSR with NextJS and NuxtJS

More recent posts can be found on medium.com/@devbyrayray

Raymon S — November 14, 2017

At the moment there is a lot talking about SSR (Serverside rendering) applications. SSR is most used in combination with frameworks like React or Vue. For React there is NextJS and VueJS has NuxtJS.

Check my experiment with the new Mr Frontend Blog with NextJS and the WordPress API!

https://youtu.be/7N6PaO7UnvA

So no JavaScript teaching today, but an introduction to NextJS! NextJS [embed]https://res.cloudinary.com/zeit-inc/video/upload/front/blog/next.js/hello-world_2.mp4[/embed]

NextJS is a JavaScript framework for NodeJS, build on top of React. NextJS is super easy to use!

Most people know and use React as a client-side application. But with NextJS all the React Components are rendered by NodeJS on the server and then served to the browser. With client-side rendering, the browser downloads the JavaScript and other assets and then renders the view when that is finished. SSR & CSR SSR and CSR have both pros and cons, explained in the "The Benefits of Server Side Rendering Over Client Side Rendering".

At the moment I'm experimenting with NextJS and using the WordPress API on Heroku, to experiment with a new design for the Mr Frontend Blog. If you want to try it out for free on Heroku, please check out this starter project on Github for running NextJS on Heroku. NuxtJS If you prefer VueJS more than React, please checkout NuxtJS. NuxtJS is similar to NextJS, both are rendering their components serverside with NodeJS. I didn't try NuxtJS, but it looks almost as awesome as NextJS. Maybe I will try it later 😎 What do you think about it? I'm wondering what you think about SSR or CSR and both the pros and cons. Or do you see something usefull for NextJS or NuxtJS?

Please let me know in the comments 😉