Universal React Apps Using Next.js

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Transcript

1. Universal React Apps Using Next.js SIA KARAMALEGOS @THEGREENGREEK SIAKARAMALEGOS ! " #
2. Who Am I? @THEGREENGREEK SIAKARAMALEGOS ! " #
3. Server- vs Client-Side Rendering Universal JavaScript Server-Side First with Universal JS Introducing Next.js How to learn more Overview ↑ code here ↑
4. What is Server-Side Rendering vs Client-Side Rendering?
5. “ ” Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments. GERT HENGEVELD, SOFTWARE ENGINEER AT @XEBIA
6. Server-Side First Using Universal JavaScript Pros + Faster initial load and visibility for a user + More equivalent performance across multiple devices and bandwidths + Faster time-to-interaction Cons - Higher complexity - Longer time to ship full- featured app
7. Next.js u Server-rendered by default u Automatic code splitting for faster page loads u Simple page-based client-side routing u Webpack-based dev environment, supporting hot module replacement u Able to implement with Express or any other Node.js HTTP server u Customizable with your own Babel and Webpack configurations BY ZEIT Next.js is a minimalistic framework for server-rendered React applications.
8. How Does Next.js Work? INITIALIZING A NEW APP
9. How Does Next.js Work? CREATING THE INDEX ROUTE AND PAGE
10. How Does Next.js Work? CREATING ADDITIONAL ROUTES AND PAGES
11. How Does Next.js Work? NAVIGATION
12. How Does Next.js Work? LOADING DATA
13. Summary u Server- and client-side rendering each come with pros and cons u With Universal JavaScript, we can run the same code on both client and server, but truly taking the best of both worlds can be complex u Next.js for React is a great solution that overcomes the complexity u Rapid set-up – preconfigured Webpack + Babel that is still customizable u Minimal convention framework where routes are defined by files in a /pages/ folder u Automatic code-splitting for each page in /pages/ u Can asynchronously load anticipated pages after the current page has rendered u Developer writes one set of (universal) code that the app runs on server or client, whichever is best for the current situation
14. Resources u About Next.js https://zeit.co/blog/next u GitHub repo https://github.com/zeit/next.js/ u Tutorial https://learnnextjs.com u New version 3.0 details https://zeit.co/blog/next3 u “7 Principles of Rich Web Applications” by Guillermo Rauch, the inspiration for Next.js https://rauchg.com/2014/7-principles-of-rich- web-applications DON’T READ THIS SLIDE, GO TO: https://github.com/siakaramalegos/nextjs-talk #
15. Thanks! CODE AND SLIDES AT https://github.com/siakaramalegos/nextjs-talk @THEGREENGREEK SIAKARAMALEGOS ! " #