Server Side Rendering Tuning with Next.js

Transcript

1. Server Side Rendering Tuning with Next.js Server Side Rendering Tuning with Next.js Mercari x Merpay Frontend Tech Talk vol.2 @vwxyuratoooo
2. Yutaro Miyazaki (@vwxyutarooo) Yutaro Miyazaki (@vwxyutarooo) 2012~ Jobless 2013~ Freelance 2016~ Startup 2018~ Mercari
3. My Talk is About... My Talk is About... Our new architecture of Mercari Web The performance issue of Server Side Rendering with Next.js
4. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion
5. What Web Re-Architecture is What Web Re-Architecture is
6. Ancient Huge PHP Code ↓ Modern Architecture
11. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion
12. Apollo Apollo
15. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion
17. Next.js Upside Next.js Upside Build System Smart Chunk System Various Practices
18. Next.js Downside Next.js Downside Folder Structure Router We hit the Server Side Rendering Performance issue...?
19. Server Side Rendering Performance?
21. 100 requests per second. 40 CPU cores were waste. It still doesn't reaches to 100 requests per second On the production environment It's supposed to spend 800 CPU cores.
23. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion
24. Performance Tuning Performance Tuning How can we solve this catastrophic performance issue
25. Render method tuning renderToNodeStream for example. Cache
26. Investigation Investigation
27. What We Learned is What We Learned is Styled Components CategoryLists component Contained regular expression. renderToStaticMarkup and renderToHTML .
28. Things we've adopted: Prevent HTML from rendering twice. Client Side Render Component.
29. 1. Prevent HTML From Rendered Twice 1. Prevent HTML From Rendered Twice
30. Why Why It's rendered twice by renderToStaticMarkup and renderToHTML ?
32. The case of React Apollo const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
35. For general purpose, React Apollo needs to correct all queries from component tree.
36. Our Solution Our Solution Fragments + React Apollo Fragments + Apollo Client
37. Fragments: query GetPerson { people(id: "7") { firstName lastName avatar(size: LARGE) } } fragment NameParts on Person { firstName lastName } query GetPerson { people(id: "7") { ...NameParts avatar(size: LARGE) } }
39. const data = (await apolloClientInstance.query(queryOptions)).data;
40. Measuring Performance (again) Measuring Performance (again)
42. 2. Client Side Render Component 2. Client Side Render Component
45. By DynamicComponent: import dynamic from 'next/dynamic'; const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false } ); export default const Index = () => <div><DynamicComponentWithNoSSR /></div>;
46. Measuring Performance (again) Measuring Performance (again)
47. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion
48. Additionally The Latency Duration has Improved P50: 1,000ms -> 600ms
49. Also we saved nearly 1.5 million yen per month.
50. It doesn't matter which frame work you choose, the performance needs to be considered by application.
51. Don't Guess, Measure.