2 - 🏗️ Architecture
Objective: Identify the key components of the product and how they are related to each other.
Recommended duration: Roughly 20% of the session
With the requirements in mind, we can move on to the architecture design proper. Your next task is to come up with a product/system architecture by identifying the key components of the product, how the components interact with each other, and how they are related. Remember to focus on the client-side architecture, not the back end.
🖼️ Rendering approach
CSR: Client Side Rendering: CSR involves rendering web pages directly in the browser using JavaScript. All logic, data fetching, templating, and routing are handled on the client side. This method is excellent for interactive applications but can suffer from slower initial load times and less effective SEO
SSR: Server Side Rendering: SSR involves the server generating the full HTML for a page in response to navigation. It’s particularly useful for content-heavy sites where SEO and quick loading of the initial content are critical. However, it can lead to increased server load and complexity in handling dynamic content
SSG is the process where HTML pages are generated at build time. The pre-built pages are served statically on request without the need for real-time rendering. This approach is highly efficient for content that doesn’t change often, offering excellent load times and SEO benefits
ISR is an extension of SSG available in Next.js and other frameworks that allows developers to update static content incrementally without rebuilding the entire site. It’s particularly useful for sites that want the benefits of static generation but need to keep their pages updated regularly