Lessons Learned from Using Next.js in Production
- 1. Lessons Learned from using in Production @PanJ Panjamapong Sermsawatsri June, 3 2017 React Bangkok 2.0.0 Pathumwan Institute of Technology
- 2. Panjamapong (PanJ) Sermsawatsri CTO at TakeMeTour Google Developer Expert in Web Technology @PanJ June, 3 2017 React Bangkok 2.0.0 Pathumwan Institute of Technology
- 5. 1 HTTP(S) Request • DNS Lookup • TLS Handshaking • First Byte • Last Byte • If got redirect response (3xx), repeat step 1
- 9. Single-page Application First paint starts here
- 10. Server-side Rendering (SSR) to the Rescue
- 12. Server-side Rendering First paint starts here Interaction is ready here
- 14. Server-side Rendering inline only used CSS
- 15. Server-side Rendering First paint starts here
- 16. Server-side Rendering Still long time-to-interact
- 17. Code Splitting to the Rescue
- 19. Code-splitting prefetch in idle period time-to-interact
- 21. How to implement all of these? Code-spliting Inline Critical CSS Server-side Rendering Prefetching
- 23. comes with • Server-side rendering • Automatic code-splitting • Prefetch support • Inline critical CSS • Built-in routing
- 26. But! There are few things you might need to know
- 27. Higher-order Component • Each page in Next.js is completely separated • You must use HOC to create a shared environment • Styles, Navbar, Redux, i18n, initalProps
- 29. styled-jsx Wow! template string literal!!!
- 30. styled-jsx Only this part can be templated
- 31. styled-jsx
- 32. Styling • Styled-jsx is painful if you are migrating component from previous project • You can use SCSS / postcss / cssnext to help reduce this pain • After P’Khame’ session, I recommend styled-component
- 33. comes with • Server-side rendering • Automatic code-splitting • Prefetch support • Inline critical CSS • Built-in routing Optimized for SEO and landing pages
- 34. Migrating to
- 35. Optimizing Page Speed • Keep bundle small • Reduce first request load time
- 36. Optimizing Page Speed • Keep bundle small • Reduce first request load time
- 37. Keep bundle small • Home • Product Category • Product Detail • About Us • Dashboard • Settings • Checkout • Notifications SEO / Landing pages Non-SEO pages
- 38. Keep bundle small • Home • Product Category • Product Detail • About Us • Dashboard • Settings • Checkout • Notifications Legacy (?) React Site
- 39. Seamless routing between 2 apps Legacy /product/2 /dashboard
- 41. Optimizing Page Speed • Keep bundle small • Reduce first request load time
- 42. Reduce first request load time App API DB
- 43. Reduce first request load time App API DB
- 44. Static Caching to the rescue
- 48. Static Caching is Dangerous • Every request with same URL will respond the same content • Session / Login data must be retrieve in client- side via componentDidMount • Side-effect is not allowed in each request (E.g. counting page view from server-side)
- 49. NEXT API DB L Reduce first request load time
- 52. MISS
- 53. HIT
- 54. Kapook.com
- 56. GitHub
- 58. https://latency.apex.sh made by TJ Holowaychuk Global Latency Test Tool
- 59. Speed Matters 50% > 3 second to load. of users will drop is page takes
- 60. Let’s build not just cool but fast website
- 61. Wanna learn and build cool stuffs? We are hiring! Send your GitHub repo to [email protected]