React Server Side Rendering with Next.js

In this talk, Jamie will demonstrate some core principles of a minimalist React framework called Next.js - We’ll also learn why SEO isn’t the only benefit of Server Side Rendering in React.

Transcript

2. !
3. PATENTS
4. What's Next.js for React?
5. Jamie Barton
7. @notrab
8. @norseal
9. Ruby on Rails
10. JavaScript
11. React dot js
15. Redux
16. GraphQL
18. zeit/next.js
19. create-react-app?
20. Core features of NextJS
21. Hot code reloading Automatic code splitting File system based routing Convention over configuration Server Side Rendering Easy to deploy
22. Hot code reloading Automatic code splitting File system based routing Convention over configuration Server Side Rendering Easy to deploy
23. SSR + SEO = ❤
26. SSR TTFB is slower than CSR
28. File system based routing
29. yarn init -y
30. yarn add next@latest
31. yarn add next@latest react react-dom
32. "scripts": { "dev": "next", "build": "next build", "start": "next start" }
33. ./pages
34. ./pages/index.js
35. export default () => <h1>Hello world!</h1>
36. yarn dev
38. ./pages/about.js
39. export default () => <h1>About us</h1>
42. Routing
43. import Link from 'next/link'
44. Example: Layout
45. ./components/layout.js
46. import Link from 'next/link' export default ({ children }) => <div> <nav> <Link href="/">Home</Link> &middot; <Link href="/about">About</Link> </nav> <main> {children} </main> <footer> &copy; 2017 </footer> </div>
47. <Link href="/about">About</Link>
48. export default () => <h1>Hello world!</h1>
49. import Layout from '../components/layout' export default () => <Layout> <h1>Hello world!</h1> </Layout>
50. export default () => <h1>About us</h1>
51. import Layout from '../components/layout' export default () => <Layout> <h1>About us</h1> </Layout>
53. Script Preloading
54. <Link href="/about">About</Link>
55. <Link href="/about" prefetch>About</Link>
56. Data Fetching
58. async getInitialProps()
59. Page.getInitialProps = async ({ req }) => { const res = await fetch('https://api.github.com/repos/zeit/next.js') const json = await res.json() return { stars: json.stargazers_count } }
60. Easy to deploy
61. npm install -g now
62. now
63. next build && next export
64. Custom Babel config Custom Webpack config Custom server logic CSS-in-JS
65. But what about…?
67. github.com/zeit/next.js