learning-patterns

Converted from PDF.

Contents

• Presentational Components: Components that care about how data is
• Container Components: Components that care about what data is shown
• DEODS}
• The current value of the state.
• The method with which we can update the state.
• SEO considerations: Most web crawlers can interpret server rendered
• Performance: With client-side rendering, the response time during
• Code Maintainability: Some elements of code may get repeated across
• Data Fetching: With client-side rendering, data fetching is usually event-
• Budgeting JavaScript: Ensure that you have a reasonably tight JavaScript
• Preloading: This technique can be used to preload critical resources that
• Lazy loading: With lazy loading, you can identify resources that are non-
• Code Splitting: To avoid a large bundle of JavaScript code, you could start
• Application shell caching with service workers: This technique involves
• A large number of HTML files: Individual HTML files need to be generated
• Hosting Dependency: For an SSG site to be super-fast and respond
• Dynamic Content: An SSG site needs to be built and re-deployed every
• Allows addition of new pages
• Allows updates to existing pages also known as Incremental Static
• Dynamic data: The first advantage is obviously why iSSG was envisioned.
• Speed: iSSG is at least as fast as SSG because data retrieval and
• Availability: A fairly recent version of any page will always be available
• Consistent: As the regeneration takes place on the server one page at a
• Ease of Distribution: Just like SSG sites, iSSG sites can also be
• Promotes code-splitting: Code-splitting is an integral part of progressive
• Allows on-demand loading for infrequently used parts of the
• Reduces bundle size: Code-splitting automatically results in a reduction of
• Performance Improvement: As the first byte reaches the client soon after
• Handling of Backpressure: Streaming responds well to network
• Supports SEO: The streamed response can be read by search engine
• Frameworks that use the server-render-pass to generate markup that
• Code, where renderToStaticMarkup is used to generate the page
• The server where the content is rendered does not recognize the
• Using CSS media query would result in rendering all of the elements
• We are using the react—lazloyad package for lazy loading images.
• Before setting the aspect ratio for images, we had tried to improve CLS by
• Tried out server-side rendering to reduce LCP but it brought about
• Modern React (Suspense / Concurrent mode / Data Fetching) - This is still
• Lazy loading using dynamic imports - This is not intuitive and developers
• Minimizes JS needed for individual route and on subsequent user
• Allows for caching of common dependencies. This ensures that a change
• We recommend avoiding preload as much as possible because it forces
• Font-CSS should be ideally inlined. Fonts from another origin should be
• Preconnect is recommended for all resources from another origin. This will
• Non-critical CSS should be fetched before user interaction begins (FID).
• Start fetching first-party JS before ABT images on the network. It will take
• Parsing of the HTML on the main thread and download of ABT images can