Have fun writing Web Application with Next.js!

I'm a React Developer and I joined Next.js project for 6 month, which developed a new web application from scratch. I summarized good points for me through the project.

Transcript

1. Have fun writing Web Application with Next.js! kourin
2. About me Feel free to follow me on Twitter @Kourin1996
3. What is Next.js?
4. What is Next.js ? • A framework for React with server side rendering (SSR) and static site generation (SSG) capabilities ◦ Can switch these strategies (including client side rendering) per page ◦ Allows you to develop more scalable and flexible application with React
5. Differences of CSR (SPA), SSR, SSG Client Side Rendering (SPA, traditional React application) Server send client JavaScript only (Also Provides small HTML,CSS But not complete ) HTML CSS Client contrcuts HTML, (CSS) to show user dynamically JS JS
6. Differences of CSR (SPA), SSR, SSG Client Side Rendering (SPA, traditional React application) Huge bundle JS, slow render on first serve Server send client JavaScript only (Also Provides small HTML,CSS But not complete ) HTML CSS Client constructs HTML, (CSS) to show user dynamically JS Huge JS
7. Differences of CSR (SPA), SSR, SSG Server Side Rendering (SSR) Server constructs HTML,CSS on access HTML CSS Client just render with received HTML, CSS, JS JS JS HTML CSS JS HTML CSS First arrive runtime
8. Differences of CSR (SPA), SSR, SSG Server Side Rendering (SSR) HTML CSS JS JS HTML CSS JS HTML CSS First arrive On page transition within app JS CSS HTML CSS JS Server sends additional data JSON Render new page on client side runtime
9. Differences of CSR (SPA), SSR, SSG Static Site Generating (SSG) HTML CSS JS Build-time On access HTML CSS JS Server sends static data Render page build-time JS HTML CSS
10. Why we use Next.js ?
11. No problem with SPA No need SSR, SSG
12. No, Next.js is great tool for many use-cases
13. Next.js solves common problems we face on development with React
14. Routing
15. Routing Even if you develop SPA, Routing is necessary part... const AppRouter = ({ onChange }) => ( <Router onChange={onChange}> <Route path='/' component={Home}/> <Route path="/users" components={UsersRouter} /> </Router> ); // Nested Router const UsersRouter = () => ( <> <Route path={`users/:userId/profile`} component={UserProfile} /> <Route path={`users/:userId/profile`} component={UserProfile} /> </> ); But • Routing is not simple • Need to consider lifecycle on page transition (Data fetch, Redirect, Reset State, ...)
16. Routing Next.js provides file system based router src └ pages 　 ├ index.jsx 　 └ users 　 　 └ [id] 　 　 　 └ profile.jsx / /users └ [id] └ profile File paths in project Routing paths One jsx file, one page
17. Routing Just add getServerSideProps in page component // /src/pages/users/[id]/profile.jsx const UserProfilePage = ({ user }) => { return ( <Layout> <UserBasicProfile user={user} /> <UserContact user={user} /> </Layout> ); }; export const getServerSideProps = (ctx) => { const userId = ctx.query.id; const user = fetch(`/users/${userId}`); return { props: { user } }; }; export default UserProfilePage; getServerSideProps is called in server to get props for page component
18. Routing Just add getServerSideProps in page component // /src/pages/users/[id]/profile.jsx const UserProfilePage = ({ user }) => { return ( <Layout> <UserBasicProfile user={user} /> <UserContact user={user} /> </Layout> ); }; export const getServerSideProps = (ctx) => { const userId = ctx.query.id; const user = fetch(`/users/${userId}`); return { props: { user } }; }; export default UserProfilePage; getServerSideProps is called in server to get props for page component On first arrives Pass props to component and render on server side On page transition within app Send props to client
19. Routing Just add getServerSideProps in page component // /src/pages/users/[id]/profile.jsx const UserProfilePage = ({ user }) => { return ( <Layout> <UserBasicProfile user={user} /> <UserContact user={user} /> </Layout> ); }; export const getServerSideProps = (ctx) => { const userId = ctx.query.id; const user = fetch(`/users/${userId}`); return { props: { user } }; }; export default UserProfilePage; React component doesn’t contain Data fetch for initial contents You don’t need to consider reset state
20. Code splitting
21. In SPA, a huge bundled file will be loaded as default Code splitting Bundled JS So, need to pay attention to code splitting Initial JS Additional JS Load everything on access Load a part of codes on access Load the rest when need
22. For code splitting on SPA, we use dynamic import, lazy load, and suspense and set manually Code splitting import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); const Component () => { return ( <Suspense fallback={<p>Loading...</p>}> <LazyComponent /> </Suspense> ); }; Wrap component you want to delay to render with lazy() Wrap lazy component with Suspense to show fallback (e.g. Loading Spinner)
23. In Next.js, code will be splitted per page base as default Code splitting JS for index JS for about On access to index On access to about
24. In Next.js, code will be splitted per page base as default And pre-fetch additional code for the pages whose links current page has Allow the client to switch page fast Code splitting JS for index JS for about On access to index Load automatically Index page Link to about
25. Other features API You can create API running on next.js runtime So you can start project without independent API Styling and UI library Can use css-in-js library (e.g. styled-components) But need setting for SSR Supports local css importing (v9.3, 20th March 2020)
26. Other features Development Experience • Hot Reloading • Visualized Debug Information • Separated config ◦ serverRuntimeConfig ◦ publicRuntimeConfig
27. Other features Incremental Static Regeneration (v9.5, 28th July 2020) HTML CSS JS Only if cache is expired JS HTML CSS Cached data JS HTML CSS Cached data Return data from cache If cache is expired, render on server side in background
28. Summary Next.js provides SSR, SSG Also gives developer helpful features to solve annoying common problems Keeps code simple and allows developer to focus developing what you want/need
29. Thank you for your attention @Kourin1996
30. When to use SSR, SSG, ISR? Server Side Rendering Can use in many cases Server Side Generating Doesn’t change many times and depends on external data sources (e.g. Contact, FAQ page) Incremental Static Regeneration The page many users access to (e.g. index)
31. Actual cases Server Side Rendering • User profile/Item page ◦ Data changes frequently and update page ASAP Server Side Generating • Personal Blog site ◦ Limited pages and not update frequently
32. vs Gatsby.js Gatsby.js is static site generator for React • Many plugins and themes If you want to develop small static site quickly, Gatsby.js is better But if you want to use SSR and develop with flexibility Next.js is better
33. Font: Cosmic Sans #fef6e3 #69C2C7 #008899 #FFB284 Font: Verdana 1234