Which is better for your website: SSG vs SSR?

Currently, I am diving into Nextjs and constructing a website using this framework. The site includes both public pages, protected routes (like user dashboard, user project details, and general user data), as well as product pages.

I have been pondering how to decide between SSG and SSR for specific routes in my website. Here is my approach so far:

  1. All static pages (forms, user input) - SSG
  2. BLOG links to be all SSG

Now, here are my queries:

  1. The dashboard and the user details pages do not require real-time data, but might contain project-specific information. Should these be handled with SSG and incremental revalidation, or with SSR?

  2. When it comes to publicly available product detail pages, there could be potentially thousands of products. In such scenarios, is the lengthy build process of pre-rendering the product pages worth the SEO advantages? It seems like an ideal situation for SSG with revalidation, or maybe SSR would be more suitable?

Thank you for your help!

javascriptnext.jsserver-side-renderingssg

Answer №1

You seem to have a good grasp on distinguishing between the various options available.

  1. SSG - involves hydrating through client-side queries.
  2. SSG - might include a multitude of products

Rushing into scalability is typically not advisable and often leads to unsatisfactory outcomes for both scenarios. SSG may be the preferable choice currently, but considering ISR could also be beneficial - ultimately choose the solution that addresses the present issue at hand.

A static site containing 1,000 pages can undergo linting and building processes in approximately 2 minutes. Opting for SSG is frequently more cost-efficient (in terms of time, effort, and hosting expenses) and it allows for switching to an alternative approach when encountering bottlenecks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue where only the latest data is being shown

When I use ajax to retrieve data from my database, the console.log displays all the results correctly, but in my HTML, only the last result is shown. What could be causing this issue? Any help would be appreciated! Thanks! Please keep your response simple ...

javascriptphphtmlajax

Concealing the flexslider in Angular when accessing the main URL

I need to hide a div with flexslider in it on the root page using ng-hide. The issue is that the images do not load when navigating to another path. Here is how my index.html is structured: <ul> <li><a href="#/">Root</a> ...

javascriptangularjsflexslider

Retrieving an Instance of Google Maps Object with the Help of JQuery

I'm currently working on a script that, when executed, will retrieve an instance of a Google Maps object from the webpage using JQuery. For example, if there is a map present on the page, it will be structured like this: <div class="map">....& ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Ways to focus on a specific div using JavaScript

I am attempting to create a 'snow' effect on the background of a particular div with a red border. Here is the code, but you can also view it here: <!-- language: lang-js --> var width = getWidth(); var height = getH ...

javascriptjqueryhtmlcss

Do iframes not utilize parental jquery?

I have a homepage that utilizes jQuery by loading it from the ajax google APIs in the head> tag. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> I attempted to use jQuery functio ...

javascriptjqueryiframe

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers

I am trying to add markers to my videojs player timeline. I have successfully implemented this feature a few months ago in a different project, but now when I try to use it again, I am encountering errors in the console and unable to see the markers on the ...

javascriptreactjsvideo.jsmarkers

Determine the central x and y coordinates of elements depending on the specified screen dimensions

Is it possible to determine the center position of an element at a specific screen size using jQuery? I am looking to calculate the center position of an element based on provided height and width dimensions. For instance, if I provide the screen size (1 ...

javascriptjquery

Step-by-step guide on sending a request from the frontend to the backend in a customized Next.js Express server

Having some trouble setting up a next.js app with a custom express.js server. The server is configured and running, but I'm unable to send requests to it from the front-end. Here is the server.js code snippet: import "@babel/polyfill"; impo ...

expressnext.js

Is it necessary to include parentheses when utilizing a named function as a jQuery ajax success callback?

Is it necessary to include parentheses when specifying a function as a success callback if it was defined earlier? What impact does including or not including parentheses have? For example: function fish_food(){//do something} $.ajax({ url: '/ ...

javascriptjqueryajax

Is it possible to use Symbol.iterator in an Object via prototype in JavaScript?

What is the reason behind the inability to add Symbol.iterator to an Object in this way? Object.prototype[Symbol.iterator]; let obj = {num: 1 , type : ' :) '} for (let p of obj) { console.log(p); } // TypeError: obj is no ...

javascriptobjectiteratorsymbols

Error: Unable to locate module: '../components'

I decided to organize my project by creating a components folder in the root directory of the project. Here's how the structure looks now: project |______components | |___________Sidebar.jsx |______pages |___________index.jsx In ...

reactjsnext.js

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

What could be causing the space under every row in my CSS? I am currently developing a tic-tac-toe application using Next.js to enhance my skills. However, I have encountered an issue with the CSS where there appears to be a small space underneath each bo ...

cssnext.js

Issue with TableHead not functioning properly when sorting is requested

I'm currently facing an issue with my table that has clickable row headers for sorting functionality using the onRequestSort function. Unfortunately, it seems like this feature is not working as expected. I have implemented the sorting logic using rea ...

javascriptreactjsmaterial-ui

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Exploring New Features Within my image editing software, there is a canvas where users can draw shapes. These shapes are sent to a server and added to an XML file, which is then returned to the client for display. Now, I am looking to enhance the program ...

javascripthtmlcanvasrotation

Is it possible to trigger an event just once?

Is there a way to ensure an event only fires once? I recently discovered that using .one seems to do the trick. ...

javascriptjquerydom-events

Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...

javascriptjqueryhtmlcss

What steps are required to insert additional tags into select2?

I've successfully retrieved the tags from my API, but I'm facing an issue with adding new tags. Here's the code snippet I've been using: $(function(){ var user_email = localStorage.getItem('email'); var api = ...

javascriptjqueryajaxjquery-select2

Managing static files using AWS Amplify and Next.js: Best practices and tips

Currently, I am developing a Next.js project on AWS Amplify and I am looking for the most efficient way to manage static assets such as images, fonts, CSS, and JS in this environment. After researching, I have come across two potential solutions: Utilizi ...

amazon-s3next.jsamazon-cloudfrontaws-amplify

Guide on exporting member formModule in angular

After compiling my code in cmd, an error message is displayed: ERROR in src/app/app.module.ts(3,10): error TS2305: Module '"C:/Users/Amir_JKO/my-first-app/node_modules/@angular/forms/forms"' does not have an exported member 'formModul ...

javascriptangularangular-forms

Receive updates from the backend GraphQL and display them on the frontend React application while executing a mutation

I recently implemented a mutation call from the frontend (react) to the backend, running 5 SQL query files. While the backend processes the queries, the frontend simply shows a "loading..." message. //frontend <Button onClick={()=>addData()} /> C ...

javascriptreactjswebsocketsocket.iographql