Download as PDF, PPTX
Lessons Learned from Using Next.js in Production
- 1. Lessons Learned from usingin Production @PanJ Panjamapong Sermsawatsri June, 3 2017 React Bangkok 2.0.0 Pathumwan Institute of Technology
- 2. Panjamapong (PanJ) Sermsawatsri CTOat TakeMeTour Google Developer Expert in Web Technology @PanJ June, 3 2017 React Bangkok 2.0.0 Pathumwan Institute of Technology
- 3.
- 4.
- 5. 1 HTTP(S) Request •DNS Lookup • TLS Handshaking • First Byte • Last Byte • If got redirect response (3xx), repeat step 1
- 6.
- 8.
- 9. Single-page Application First paintstarts here
- 10.
- 11.
- 12. Server-side Rendering First paintstarts here Interaction is ready here
- 14.
- 15. Server-side Rendering First paintstarts here
- 16. Server-side Rendering Still longtime-to-interact
- 17. Code Splitting to theRescue
- 18.
- 19. Code-splitting prefetch in idleperiod time-to-interact
- 21. How to implement allof these? Code-spliting Inline Critical CSS Server-side Rendering Prefetching
- 23. comes with • Server-siderendering • Automatic code-splitting • Prefetch support • Inline critical CSS • Built-in routing
- 24.
- 26. But! There are fewthings you might need to know
- 27. Higher-order Component • Eachpage 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 stringliteral!!!
- 30. styled-jsx Only this partcan be templated
- 31.
- 32. Styling • Styled-jsx ispainful 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-siderendering • Automatic code-splitting • Prefetch support • Inline critical CSS • Built-in routing Optimized for SEO and landing pages
- 34.
- 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 2apps Legacy /product/2 /dashboard
- 41. Optimizing Page Speed •Keep bundle small • Reduce first request load time
- 42. Reduce first requestload time App API DB
- 43. Reduce first requestload time App API DB
- 44. Static Caching to therescue
- 45.
- 46.
- 47.
- 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 firstrequest load time
- 52.
- 53.
- 54.
- 56.
- 58. https://latency.apex.sh made by TJ Holowaychuk GlobalLatency Test Tool
- 59. Speed Matters 50% > 3second to load. of users will drop is page takes
- 60. Let’s build not justcool but fast website
- 61. Wanna learn andbuild cool stuffs? We are hiring! Send your GitHub repo to WantToWork@takemetour.com
- 62.