React Server Side Rendering with Next.js
- 2. !
- 3. PATENTS
- 4. What's Next.js for React?
- 5. Jamie Barton
- 7. @notrab
- 8. @norseal
- 10. JavaScript
- 11. React dot js
- 15. Redux
- 16. GraphQL
- 18. zeit/next.js
- 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 = ❤
- 24. 💔
- 25. 😱
- 26. SSR TTFB is slower than CSR
- 27. 📈
- 28. File system based routing
- 29. yarn init -y
- 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
- 46. import Link from 'next/link' export default ({ children }) => <div> <nav> <Link href="/">Home</Link> · <Link href="/about">About</Link> </nav> <main> {children} </main> <footer> © 2017 </footer> </div>
- 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>
- 56. Data Fetching
- 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…?
- 68. 🤔