Universal React Apps Using Next.js (from React Next)

6e0ba5b45dafe063b98db2a1d5391433?s=47 Sia
September 10, 2017

Universal React Apps Using Next.js (from React Next)

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 this presentation explores what it all means and how to easily build universal React apps using the Next.js framework. I walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this if you’re comfortable with React and ES6 syntax.

6e0ba5b45dafe063b98db2a1d5391433?s=128

Sia

September 10, 2017
Tweet

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 Introducing Next.js How to

    learn more Overview ↑ code here ↑
  4. Server- vs Client-Side Rendering WHY CAN’T WE HAVE THE BEST

    OF BOTH?
  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. 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 Customizable with your own Babel and Webpack configurations u Able to implement with Express or any other Node.js HTTP server BY ZEIT Next.js is a minimalistic framework for server-rendered React applications.
  7. How Does Next.js Work? INITIALIZING A NEW APP

  8. How Does Next.js Work? CREATING THE INDEX ROUTE AND PAGE

  9. How Does Next.js Work? CREATING ADDITIONAL ROUTES AND PAGES

  10. How Does Next.js Work? NAVIGATION

  11. How Does Next.js Work? LOADING DATA

  12. How Does Next.js Work? DYNAMIC ROUTES – QUERY STRINGS

  13. How Does Next.js Work? DYNAMIC ROUTES – ROUTE MASKS

  14. How Does Next.js Work? DYNAMIC ROUTES – CUSTOM API SERVER

  15. Next.js provides an easy solution to the complexity of Universal

    JS u Rapid set-up – preconfigured Webpack + Babel that is still customizable u Less bloat & less opinionated than Create React App 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 further optimize with lazy-loading modules and components 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
  16. 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 #
  17. Thanks! CODE AND SLIDES AT https://github.com/siakaramalegos/nextjs-talk @THEGREENGREEK SIAKARAMALEGOS ! "

    #