Stack Overflow
Stack Overflow

Questions tagged [server-side-rendering]

Serverside rendering is a technique for rendering a client-side app on the server.

Rendering a client application on the server results in a faster experience for end users since they do not have to wait for assets to load before they can see and interact with an app. This is accomplished by using isomorphic code: code which is used on both the server and the client.

4406 questions
147
votes
6 answers

Is using Redux with Next.js an anti-pattern?

I'm building a Next.js app and it currently is using Redux. As I am building it I am wondering if the use of Redux is really necessary and if its use is actually an anti-pattern. Here is my reasoning: In order to properly initialize the Redux Store…
Jamie S
  • 2,029
  • 2
  • 13
  • 19
108
votes
17 answers

Module not found: Can't resolve 'fs' in Next.js application

Unable to identify what's happening in my next.js app. As fs is a default file system module of nodejs. It is giving the error of module not found.
Ibad Shaikh
  • 2,704
  • 3
  • 15
  • 27
88
votes
9 answers

Next js - disable server side rendering on some pages

Is it possible to disable ssr on some pages using Next js? For example, I have a page with a product description on which I use ssr for SEO but I also have a page with a list of items or products which I can filter and for that page, I don't want to…
gigs
  • 1,241
  • 2
  • 15
  • 25
75
votes
10 answers

AngularJS - server-side rendering

As you may know, AirBnb opensourced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr) which should enable server-side rendering of Backbone apps. This is cool, because one can run the first "iteration" of template rendering on the server and…
tillda
  • 18,150
  • 16
  • 51
  • 70
55
votes
7 answers

React - “localStorage is not defined” error showing

I am trying to make my website SEO friendly with meta tags. I am implementing server-side rendering in my application. After this, I am getting the following error: ReferenceError: localStorage is not defined. Please help how to resolve it. My…
Chander Shoor
  • 566
  • 1
  • 4
  • 8
51
votes
5 answers

How to detect window size in Next.js SSR using react hook?

I am building an app using Next.js and react-dates. I have two component DateRangePicker component and DayPickerRangeController component. I want to render DateRangePicker when the window's width is bigger than size 1180px, if the size is smaller…
GoonGamja
  • 1,936
  • 5
  • 20
  • 46
46
votes
3 answers

Internal API fetch with getServerSideProps? (Next.js)

I'm new to Next.js and I'm trying to understand the suggested structure and dealing with data between pages or components. For instance, inside my page home.js, I fetch an internal API called /api/user.js which returns some user data from MongoDB. I…
m4tt
  • 825
  • 1
  • 11
  • 28
43
votes
2 answers

NextJS 13

Error: Event handlers cannot be passed to Client Component props. ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component. const reqHelp = () => { Swal.fire({ title: '1', text: '1', …
밍원MinGWon
  • 435
  • 1
  • 4
  • 6
40
votes
6 answers

Error: getStaticPaths is required for dynamic SSG pages and is missing for "xxx". NextJS

I am getting this error "Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'" when I try to create my page in NextJS. I don't want to generate any static page on build time. So why do I need to create a 'getStaticPaths'…
Juanma Menendez
  • 17,253
  • 7
  • 59
  • 56
39
votes
2 answers

What is the difference between `next export` and `next build` in Next.js?

I have developed a web app that uses Nextjs app for the frontend and a Python (Django) API server as the backend. Most of my front-end pages have API calls to my backend server (in ComponentDidMount or in response to user actions like button…
GunnerFan
  • 3,576
  • 3
  • 25
  • 38
38
votes
12 answers

How to detect the device on React SSR App with Next.js?

on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser. I use Next.js application with server-side rendering and the library react-device-detect. Here is the CodeSandox link. import Link from…
Benjamin Sx
  • 653
  • 1
  • 7
  • 18
33
votes
5 answers

NextJS 13 folder structure best practice

I'm learning to use NextJS and I'm using the latest version with App Router, I'm currently stuck on how to do routing, such as where to put the register and login pages, and its' folder structure in general, where I put components and how to group…
Dead
  • 361
  • 1
  • 3
  • 6
33
votes
3 answers

How to get query params using Server component (next 13)

Next13 is out, and they advise to use the new app directory where every component is by default a "Server Component" Inside a "server Component", you can use: async/await to fetch data. cookies() to retrieve cookies headers() to retrieve request…
Tonio
  • 4,082
  • 4
  • 35
  • 60
33
votes
3 answers

Dynamic routing with getServerSideProps in Nextjs

I'm trying to learn nextjs. Struggling to work out routing with getServerSideProps. Using a free API I have a list of countries displayed on the DOM. I want to dynamically link to a country and data be fetched and displayed for that specific…
DGB
  • 1,252
  • 2
  • 16
  • 32
33
votes
7 answers

React JS Server side issue - window not found

Hi I'm trying to use react-rte in my reactJS project. I have server side rendering and every time I want to use this package I get: return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); …
Jan Omacka
  • 1,810
  • 4
  • 20
  • 27
1
2 3
…
99 100