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
9
votes
3 answers

Why all styles of materialui will disappear after refresh in nextjs?

I've found the solution from the doc of materialui (https://material-ui.com/guides/server-rendering/) but I still don't know the reason. Why the style works in the first time rendering but disappear in the second time? I know SSR will generate the…
Michael Tsai
  • 751
  • 2
  • 11
  • 21
9
votes
3 answers

Temporary disable Next.js pages on build

There are SSR-related problems with several pages in Next.js project that results in errors on npm run build and prevent the project from being built: pages/ foo/ bar/ [id].jsx index.jsx index.jsx ... For example,…
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
9
votes
3 answers

Next Auth "Credentials" redirection when throwing error on custom login page

I have a custom login page, which in turn calls the signIn() function when submitting the form. I am only using the "Credentials" provider. Server-side, I am just trying to throw an error so I can handle it on the frontend. Seems like something…
Gurnzbot
  • 3,742
  • 7
  • 36
  • 55
9
votes
0 answers

How to persist redux state in Next.js without blocking SSR?

I have a serverless Next.js app in which there are some components that depend on data passed down from the redux store. Currently my method requires redux-persist to save the store as the user navigates, otherwise the aforementioned components will…
HJEC
  • 400
  • 3
  • 11
9
votes
2 answers

Create a HOC (higher order component) for authentication in Next.js

So I'm creating authentication logic in my Next.js app. I created /api/auth/login page where I handle request and if user's data is good, I'm creating a httpOnly cookie with JWT token and returning some data to frontend. That part works fine but I…
9
votes
5 answers

nextJS SSR useRouter() does not work when refresh page

I am using nextJS SSR in my project. Now when I try to use the following code to get page parameters then it shows undefined. function About() { const router = useRouter(); const { plan_id } = router.query; console.log(plan_id) } export…
9
votes
1 answer

How to import SCSS on Component Level with Next.js

I am coming from a CRA background and working my way through Next.js version 9.4.2 My project tree looks something like this :- pages/ _app.tsx index.tsx components/ Navbar/ index.ts Navbar.tsx Navbar.scss Inside…
Aman
  • 623
  • 1
  • 11
  • 23
9
votes
1 answer

Access staticContext through hook in react-router

I want to create a generic "not-found" component that sets the statusCode to 404 if the StaticRouter is used. I know that I can do this: } /> Or use a child function as…
Thomas
  • 1,512
  • 3
  • 12
  • 37
9
votes
4 answers

VueJS sever-side-rendering: computed property not seeing changes in store

I'm trying to get server side rendering to work in VueJS. I've been following the official docs, and I'm attempting to get this example to work using axios. The endpoint is correct and the data does show up in the…
dizzystar
  • 1,055
  • 12
  • 22
9
votes
2 answers

How to implement SSR for Material UI's media queries in NextJs?

I can't follow the documentation of implementing Material UI's media queries because it's specified for a plain React app and I'm using NextJs. Specifically, I don't know where to put the following code that the documentation specifies: import…
Arturo Cuya
  • 135
  • 3
  • 17
9
votes
3 answers

Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'

I want to integrate angular universal into my project and I use AngularFire library. But when I test my app locally by running npm run build && npm run serve:ssr. I have this error webpack:///./dist/server/main.js?:95613 throw…
9
votes
2 answers

What is best approach for state management in server side rendering like next.js?

So working on a large scale application where I need to develop a front end part. And we would like it to be SSR for SEO purposes, But when it comes to state management we have redux for that so how we are going to manage it and what should be the…
9
votes
5 answers

403 Access Error returned from Browser possibly caused by AWS

I have my serverless web app hosted on AWS amplify. I am getting Access Denied error XML if I try refreshing the page. When I look into the Console, it shows no output. The code works fine on localhost, but will cause 403 error on live. I have found…
9
votes
2 answers

How to perform a server side data fetching with React Hooks

We just start moving into React Hooks from the React life-cycle and one of the things that we noticed, is that there's no straightforward way to run something similar to ComponentWillMount for loading data before sending the rendered page to the…
Idan Gozlan
  • 3,173
  • 3
  • 30
  • 47
9
votes
2 answers

create-react-app typescript for server-side-rending

I have a project built by create-react-app typescript (tsx files). I want to make the project SSR now, but I'm not sure how to start. I was able to do SSR before using typescript following this article appreciated if you can give me a guide