 <p>When building web apps, developers often choose between Static Site Generation (SSG) and Server Side Rendering (SSR) to deliver content to users. Each method has various advantages and use cases.</p>

 <h2>Static Site Generation (SSG)</h2>
 <p>Static Site Generation generates HTML pages at build time. Generated at build time means that when we build our web app using command it fetches data from our backend makes a static HTML page with your content and stores it.
 </p>
    
 <h3>Advantages</h3>
 <ul>
 <li><strong>Performance:</strong> SSG sites load quickly since HTML pages are pre-generated and served to users quickly.</li>
 <li><strong>Scalability:</strong> Suitable for high traffic as fewer requests are made to the server. So there is less load on the server. It&apos;s prevents issues like heavy load or server down.</li>
 <li><strong>SEO:</strong> Static pages are pre-generated therefore it is easy for crawlers or search engines to crawl your website easily and rank it.</li>
 </ul>
 <h3>Example of SSG in Next.js:</h3>
 <pre class="language-jsx">
 <code>
 export async function getStaticProps() {
 const res = await fetch('https://api.example.com/data');
 const data = await res.json();
 return { props: { data } };
 }
 </code>
</pre>
 <h4>As you can see in this video the contents load so much faster as it uses SSG. The content is pre-generated at build time and directly served to the user in the form of an HTML page.</h4>
 <video controls muted autoplay width="600">
 <source src="https://cloud.appwrite.io/v1/storage/buckets/664e127a00102b80cddd/files/668df8a3001071668b99/view?project=65e69a022811af019dca&mode=admin" type="video/mp4">
 Your browser does not support the video tag or the file format of this video.
 </video>

 <h2>Server Side Rendering (SSR)</h2>
 <p>In Server Side Rendering html page is rendered on each request. Content is fetched and injected into templates on the server before being sent to the client. If you have high traffic SSR can be a reason to the high load on your server.</p>
<div class="image-previewable relative">
    <img class="h-auto cursor-pointer" width="600" src="https://cloud.appwrite.io/v1/storage/buckets/664e127a00102b80cddd/files/668dfafa00216870be0f/view?project=65e69a022811af019dca&mode=admin" alt="cwr blog image">
    <div class="close-btn hidden absolute top-4 right-4  text-white  p-3 cursor-pointer text-4xl">✕</div>
</div>
 <h3>Advantages</h3>
 <ul>
 <li><strong>Dynamic Content:</strong>It is ideal for content that changes frequently or personalized content.<br/> <strong> For Example:</strong> Online Chating web app that changes content frequently. Using SSR in this case is a better option. </li>
 <li><strong>SEO:</strong> Content is fully available to search engines as it&apos;s rendered on the server and then fetches to the client side on user request to the server.</li>
 </ul>
 <h3>Disadvantages</h3>
 <li><strong>Initial Load:</strong> Slower initial load times compared to SSG as pages are generated dynamically. It will cause a high page load time for low internet users.</li>
 <h4>Example of SSR in Next.js</h4>
 <pre class="language-jsx">
 <code>
 export async function getServerSideProps() {
 const res = await fetch('https://api.example.com/data');
 const data = await res.json();
 return { props: { data } };
 }
 </code>
</pre>
 <h4>As you can see in this video the content loading time is slow compared to SSG. Because the content is fetching from the server on each request from the user dynamically</h4>

 <video controls muted autoplay width="600">
 <source src="https://cloud.appwrite.io/v1/storage/buckets/664e127a00102b80cddd/files/668df91400296a1ececb/view?project=65e69a022811af019dca&mode=admin" type="video/mp4">
 Your browser does not support the video tag or the file format of this video.
 </video>
    

 <h2>Comparison</h2>
 <p>Choosing between SSG and SSR depends on your requirements:</p>
 <ul>
 <li><strong>Performance:</strong> SSG offers faster loading times. Using it for Blog apps or other that&apos;s content doe&apos;s not update frequently.<br/>SSR can handle dynamic content. Using it for app like online chatting or other that&apos;s content updates frequently </li>
 <li><strong>Content Freshness:</strong> SSR serves up-to-date content on each request; SSG content is as fresh as the last build.</li>
 <li><strong>Scalability:</strong> SSG scales well for static content; SSR handles dynamic content better.</li>
 </ul>
    

 <h2>Conclusion</h2>
 <p>Both Static Site Generation and Server Side Rendering have their strengths. Choose Static Site Generation(SSG) for fast, scalable, and SEO-friendly sites with less dynamic content. Use Server Side Rendering(SSR) for dynamic, personalized content that requires frequent updates.</p>

When building web apps, developers often choose between Static Site Generation (SSG) and Server Side Rendering (SSR) to deliver content to users. Each method has various advantages and use cases.

Coding Articles

Static Site Generation(SSG) vs Server Side Rendering(SSR)

Abdul Rafay