วีดีโอ

I wish i had such teacher when i studied in the university!

Бог. Третье видео от тебя, рекоммендованное мне алгоритмом и снова 10/10. Спасибо!

Hi , These contents are highly informative. Could you please share the presentations shown in the videos ?

In the SSR section, it mentions that the page will be interactive from the start. However, this is not entirely correct. The page becomes interactive only after hydration, when the client-side JavaScript takes over and attaches event listeners and dynamic functionality to the server-rendered HTML. Without hydration, the page remains static and non-interactive.

Your video here is really valuable not just because it gives a great self practice method but its also a way to ease into System Design study itself. I couldnt get myself to start big huge videos or buy courses. I'm really short on time though. I'm a developer with 3 years of scattered stack experience but i need to get somewhere solid before new year's 😅 and it suggested 10 applications already.

Simply Awesome ❤

Amazing Video Dmitriy❤‍🔥

You, sir, are a legend! _/\_

thanks for sharing great content🔥🔥❤❤

What is the most common way to defer CSS and js in 2024. can you recommend some articles I can read about it?

thanks for sharing this very very helpful.

Great content

Very useful 🔥

Thank you making our life better

thanks, Dima for sharing this

Great job ❤

Better than a 100 google searches lol

Woah, this is amazing, cheers man!

This is really good, I really enjoy the way you expose content. I noticed you stopped posting videos. If possible would be amazing if you could do some more of these, explaining the different points on design system like this one. Thanks for the content, cheers!

Can you please do a SD video for ecommerce and booking application

subed man. Thank you :)

Easily the best FE systems design content creator, thank you!

Hello Dmitriy, Love 💖from Tamilnadu and Tamil Eelam. Thanks for saving me with helpful contents.

can you provide a link for the slides please?, i want to review them later

What should be in focus if we want to prepare for Data/API, caching topics related to front end design?

Exact road map for system design ( is coding required for system design)

Thank you so much for the great explanation in this video! But what about DRM? How can I protect my on-demand streaming video from being stolen? Also, should I implement HLS/DASH and DRM myself, or is it better to subscribe to a service?

In terms of dealing with scaling either Redis pub/sub or Kafka

amazing man! your knowledge is excellent but your teaching is fantastic. keep going it please! 👌

in 17:40 I think the build-time definition is not quite right. build time is the process before the project is served to the server not to the client.

thanks

💫

thanks for all details

Great content ❤

Gem channel.

Superb content.. thanks for clearing the gaps..🎉

great

Perfectly explained!

Hi, thank you for the detailed video explanation, just a request can you share the images as slides, so that we have a reference for future.

thanks a lot man, really i owe you alot , the way you are providing content is very usefull for senior and lead level and manager level thank you once again keep going

Great explanation. Is it possible to get the slides of the video

How about scaling in server side rendered application, don't we need to worry about traffic there?

Notes: ## Introduction - Web rendering includes steps from user opening a site to full page display - Key steps: DNS lookup, HTTP request, HTML parsing, CSS parsing, JavaScript execution - Different rendering approaches exist due to varied site requirements ## Key Metrics 1. Time to First Byte (TTFB): Time between clicking a link and first content byte loading 2. First Contentful Paint (FCP): Time when any part of page content is rendered 3. Largest Contentful Paint (LCP): Time until largest image/text block is rendered 4. Total Blocking Time (TBT): Measures main thread blocking during page load ## Business Considerations - Types of applications: - B2B (Business-to-Business) - B2C (Business-to-Consumer) - Internal Tools - Profit Centers vs. Cost Centers ## Rendering Patterns ### 1. Server-Side Rendering (SSR) - Types: Dynamic SSR, Static Site Generation (SSG) - Advantages: - Fast time to content - Good SEO - Improved Core Web Vitals - Disadvantages: - Full page reloads - Increased server load - More complex server configuration ### 2. Static Site Generation (SSG) - Generates static HTML files during build time - Advantages: - Fast load times - Reduced server load - Good SEO - Disadvantages: - Limited to static content - Frequent rebuilds for content updates ### 3. Client-Side Rendering (CSR) - Renders content in the browser using JavaScript - Advantages: - Smooth user experience - Easier development and maintenance - Reduced server load - Disadvantages: - Poor SEO (if not mitigated) - Slower initial load - Performance issues on low-power devices ### 4. Hydration - Process of making server-side rendered static HTML interactive - Types: - Full Hydration - Partial/Selective Hydration - Progressive Hydration - Island Architecture - Challenges: - Uncanny Valley effect - "One app for the price of two" problem ### 5. Resumability - Recovers application state without re-executing components on client-side - Implemented in Qwik framework - Solves "one app for the price of two" problem ### 6. Pre-rendering - Creates SEO-friendly single-page applications - Serves different versions for users and web crawlers - Advantages: - Good SEO for SPAs - Smooth single-page experience - Disadvantages: - More complex setup - Higher server load ## Advanced Techniques 1. Code Splitting 2. Preloading 3. Lazy Loading 4. Application Shell Architecture 5. Trimorphic Rendering (combines SSR, CSR, and Service Workers) ## Choosing the Right Approach Consider: - Website vs. Web Application - Static vs. Dynamic content - SEO requirements - Initial loading time importance - UI responsiveness needs - Budget constraints - Offline support requirements Use the decision tree provided in the lecture to guide your choice. ## Use Cases 1. Social Network: SSR with Hydration (Progressive/Island Architecture) 2. Dashboard: Client-Side Rendering with optimization techniques 3. Marketplace (e.g., Amazon): SSR or SSR with Hydration Remember to always consider specific project requirements and constraints when choosing a rendering pattern.

You gave the great explanation of rendering patterns and I am fortunate I found this channel in recommendations

Great video, thank you. Just one small advice, in your next videos speak slower ❤

can you please share the slides that you have used in the video. Thanks for free knowledge.

About to start reactjs and i found the goldmine I guess. as soon as I complete reactjs ill study from you. keep them coming

Is there a way to filter out the breathing noise? It's hurting my ears. :'(

thank you , great video

Your explanation is clear as crystal! Thank you❤