Questions tagged [server-side-rendering]

I'm currently facing challenges in my Meteor app while trying to incorporate SSR and using the Drawer component from MaterialUI with an onClick event handler. If anyone has any boilerplate or examples that could help, I would greatly appreciate it. Here ...

I am currently working on a basic Next.js project with three main files. My goal is to populate the index page with data from a JSON file. Interestingly, when I deploy the project to Vercel using getStaticProps, everything functions correctly. However, up ...

While integrating NextJS into my React app, I encountered a problem. When the page is reloaded or accessed directly via a link (e.g., somehostname.com/clients), my getInitialProps function does not execute. However, if I navigate to the page using <Link ...

When the cache is not accessible in Next.js, the page will be server-side rendered and displayed using either the true or blocking fallback approach. I am curious about the approach taken by Astro.js in this situation. I am planning to develop a dynamic b ...

Recently, I embarked on a project utilizing the latest version 13 of Next.js with its new app directory feature. As I integrated a custom dropdown into one of my pages, an error surfaced: "Hydration failed because the initial UI does not match what was ren ...

There seems to be an issue with setting up the template hierarchy in Express or possibly an error in how Nunjucks is being utilized. The goal is to have a template that includes common parts and specific pages that extend this template. It appears that the ...

<?php namespace AppHttpControllersAuth; use IlluminateSupportStr; use IlluminateSupportFacadesDB; use IlluminateHttpRequest; use AppHttpControllersController; use AppModelUser; use IlluminateSupportFacades ...

Incorporating NextJs for Server Side Rendering has been a game-changer for me. I've also implemented a navbar in my application that needs to adjust styles based on the scroll position. Is there a way to determine if the window has scrolled beyond 100px ...

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

In my Angular project, I have a file located at src->app->lang-translate->lang-translate.module.ts that is trying to access files from other locations as shown below: {prefix: "../../assets/translate/Pages/header/", suffix: ".json"}, {prefix: "../../assets ...

This current issue is reminiscent of a problem we faced in the past. Here is the link to the relevant discussion: Github Discussion Currently, I am utilizing Next.js 13 and Ant Design V5. When loading Ant Design components, they initially appear as unstyl ...

Once the user has logged in, the API response contains a JWT token which I save in the local storage. Now, how can I access this token from the server component to make API requests? I am using Next.js 14. I am currently storing the token in a context but ...

I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge. After some trial and error, I realized t ...

I'm having trouble troubleshooting this code on Next.js. index.js : import { getUsers } from "../utils/users"; import React from "react"; Home.getInitialProps = async (ctx) => { let elements = []; getUsers().then((res) => { res.map(( ...

Hello JavaScript Community, I've been delving into the world of Next.js and its rendering capabilities, and I find myself pondering about pre-rendering behavior in scenarios where neither SSR (getServerSideProps) nor SSG (getStaticProps/getStaticPath ...

In my quest to create a user-friendly NPM module for project integration, I am envisioning a seamless process where the user can effortlessly import the module without any prior knowledge of Nuxt. The main feature of this module will be a comprehensive adm ...

Introduction I am currently in the process of developing an application using next.js, specifically utilizing its static site generation feature. Despite following various examples and documentation for hours, I am encountering an issue where the params o ...

I'm currently working on a website using Next.js. With Next.js, I have access to features like SSR and dynamic routing. Is it necessary for me to incorporate express into my project? If yes, what are the reasons behind needing to use it? What unique ...

I'm currently exploring NextJS with SSR and encountering an error when trying to fetch data from a Spotify playlist using the spotify-web-api-js library. This issue only occurs when executing on the server side: error - ReferenceError: XMLHttpRequest is no ...

We are contemplating a rewrite of our React app to incorporate server-side rendering and have recently learned about Next.js. It appears to be a promising solution that offers seamless integration right from the start (routing, webpack, etc) with minimal ...

I have encountered a sluggish performance issue with my SSR App Nextjs 12 hosted on AWS Amplify. After logging the getServerSideProps() function, I discovered that the page loading time is around 9 seconds, even though the code inside getServerSideProps e ...

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

I am utilizing a getServiceSideProps function to display a complex APP that interacts with an API: const MyApp: NextPage = (props: any) => { let stripePromise: any; const getStripe = async () => { if (!stripePromise) { str ...

My Next.js version is 14.1.0 and I am currently using the App router. async function Page() { const dataPromise: Promise<any> = getData(); const data = await dataPromise; console.log('data: ', data); return ( .... ); } The ge ...

My current website utilizes SSR (using nextJS) to display the landing page in the root directory. However, I am interested in having my create-react-app application displayed when a user is logged in, and revert back to showing the landing page when they a ...

On my webpage, I have a never-ending gallery of items that need to be displayed. Additionally, the page includes filters for these items. My idea is to use SSR to load the initial 20 items and then utilize CSR, possibly through react-query, to continuousl ...

Currently, I am diving into the next.js tutorial, but there are some aspects that have me puzzled: In the tutorial, it mentions here, that when you click a <Link> element, it does not trigger a server request but instead performs "Client-side naviga ...

Can cookies be utilized on the server side in Nuxt 3? For instance, I need to set a cookie in an API and then access its data in middleware: // ~/server/api/testApi.ts export default defineEventHandler(event => { /* setCookie('myCookie', 'myValue' ...

Currently, I am in the process of transitioning my Next 12 app to Next 13 along with its updated /app directory. Within this transition, I have a <LoginPage> component (located at /login) that requires the use of hooks for managing form data. To acc ...

I am looking to create a static navbar without needing client-side fetching. Currently, I am using Apollo GraphQL and my _app.js file is set up like this: import React from 'react'; import Head from 'next/head'; import { ApolloProvider ...

While reading through the Mui's Server-side Rendering DOCS, I came across an interesting point. It mentioned that to avoid FOUC (Flash of Unstyled Content), we need to inject styles into the rendered HTML on the server side, which made complete sense. How ...

I am currently exploring options for executing code upon the initial page load of each request. My goal is to determine the domain of the request and redirect to a specific section of the website based on this information. One possibility I have considere ...

I am currently in the process of building an application using next JS. While trying to authenticate the user through the login page, I encountered an issue when attempting to retrieve the access token from local storage. The error message "localstorage i ...

I've spent a lot of time scouring the internet for a solution to my problem, but it seems like maybe I'm not asking in the right way. My project involves creating a Node-Express website where ReactJS is only needed on specific pages, while the rest are se ...

In my previous assumption, I believed that declaring a page or component with the "use client" directive meant that those pages would not be visible on the "View Page Source" of browsers, as they are only rendered on the client side using JS (sim ...

Just a week ago, Next13 was released and I find myself in the process of migrating an app from Next12 to Next13. My main goal is to utilize server-side components as much as possible during this transition. However, I've encountered a roadblock where I can ...

I have structured my NextJS app directory for routing as follows: /app/page.jsx import ListProduct from "@components/products/ListProduct"; import axios from "axios"; const getProducts = async (min, max, category, rating) => { co ...

Utilizing Sequelize ORM in a Next.js App router, I am retrieving data from a MySQL database. The method "getTransactions" returns the following: const { rows, count } = await Transaction.findAndCountAll({ limit, offset, where: whereClause, ...

Recently delving into Vue and Nuxt, I have been grappling with a query surrounding asynchronous requests. My understanding so far is that utilizing asyncData along with axios in Nuxt allows for fetching data that can be showcased on the frontend. However, ...

After implementing angular universal, I was able to render the static part of HTML via server-side rendering. However, I encountered an issue where API calls were being made and the server rendered the HTML without waiting for the HTTP call to complete. As ...

I am working on a VITE ssr playground with additional MUI packages available on GitHub. When I import any MUI icon and adapter from the date-time-picker, everything works fine in development mode. However, when I build the project, the server stops with e ...

Recently, I've come across my old Node, Mongo, Express, and Handlebars app which appears to be a bit outdated. The static nature of the app's data being fetched locally from the same domain and rendered on the server side with Handlebars is no longer in li ...

I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...

I'm interested in developing a website without depending on client-side JavaScript, but I still want to incorporate SPA features such as client-side routing. To achieve this, I am considering using a framework that does not rely on rendering on the clien ...

As I dive into the world of nextjs, I'm coming across conflicting information. Some sources claim that nextjs only prerenders the first page, while others suggest that all pages are prerendered by default. This contradiction has left me confused about ...

Can you host a server-side rendering application using nuxt.js (universal ssr mode) with a Firebase backend on GitHub/Gitlab Pages? Gitlab provides an example at nuxt, and I'm curious if the server-side dynamic fetching still functions properly. ...

Seeking a solution to incorporate pagination or filtering in my web application through traditional page routing. Is Client Side data fetching necessary? If query strings change, how can I prevent a re-render of the page content? Avoiding fetching all data ...

I have a unique app/components/organisms/Cookies.tsx modal window component that I integrate into my app/page.tsx. Despite including the 'use client' directive at the beginning of the component, I consistently encounter this error: ReferenceError: localS ...

Is it possible to execute a JavaScript function on the client side without using addEventListener? This situation works with addEventListener. MyComponent.js import Script from 'next/script' export default function MyComponent({ props }) { ...

Recently, I made the decision to switch my React + material-ui SPA to a Next.js statically rendered site using next export. Following the steps outlined in the material-ui example with Next.js seemed to work perfectly fine on desktop screen widths (> 960), ...

When using Angular Universal, I noticed that Http calls are being made twice on the initial load. I attempted to use transferState and implemented a caching mechanism in my project, but unfortunately, it did not resolve the issue. if (isPlatf ...

I am working on implementing a SSR page in nextjs, and I want to restrict access to only authenticated or logged-in users. How can I ensure this as the SSR is being generated on the server, without passing the token from local storage? Please share your th ...

Is there a way to fetch the layout data along with the page without adding it to every individual page? The issue I'm facing is that my layout component, loaded once on App.jsx, remains consistent throughout the session. However, due to SSRed page loading, ...

While working on a Next.js project, I am trying to include the following HTML content within the <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> The code I currently ...

Currently utilizing NextJS for Server-side Rendering Our authentication method involves the use of JWT In a standard React application, we can employ JWT for each server request to retrieve data However, some pages return varied data based on whether th ...

Hey there, presenting one of my pages in next 13 from the app directory : import { cookies } from "next/headers"; import Link from "next/link"; import styles from "@/styles/chatPage/ChatPage.module.css"; import ChatClient from ...

I have a universal CSS that impacts all div elements, but I need to exclude the divs within a parent div that has a specific class, like in this instance where it's the "should-not-apply" class. div { font-size: 20px !important; font-weight: 500 !im ...

Is there a way to log out a user on the server side using Supabase as the authentication provider? I initially thought that simply calling this function would work: export const getServerSideProps: GetServerSideProps = withPageAuth({ redirectTo: '/aut ...

I recently encountered a warning while working on my blog project with this framework. The warning I received out of nowhere reads: react_devtools_backend.js:2273 Warning: Prop `target` did not match. Server: "_top" Client: "_blank" ...

I have encountered an issue with my Next.js app when I attempt to hard reload it in production mode. The error message I receive is 404 - File or directory not found. Below is the code snippet I am using: import { useRouter } from "next/router"; import ...

I currently have a component named results.js, which is responsible for fetching data from our Back-end server. import { useRouter } from 'next/router'; import Navigation from '../../components/Navigation'; const Results = (props) => ...

Both Isomorphic Unfetch and Isomorphic Fetch are used for server-side rendering. But what sets them apart? Aside from the fact that Isomorphic Fetch is older and slightly larger when gzipped according to this comparison. Learn more about each library here ...

I'm encountering an issue while developing a server-rendered app in next.js 13. Whenever I attempt to import a material ui component within the layout.jsx or any other file, I encounter an error. The error message states that I am importing a component req ...

As a newcomer to NextJS with prior experience in basic React apps, I recently attempted to deploy a CRUD NextJS app (utilizing prisma and mongoDB). Everything runs smoothly with npm run dev, but issues arise when transitioning to npm run build followed by ...

checkout.js page contains all the necessary code, but I'm encountering an axios error and unsure of what is missing. import React from 'react'; import Head from "next/head"; import Header from "../components/Header"; impor ...

In my quest to serve a server-side generated page as a file using next.js, I decided to extract the rendered content within a custom server.js file: const express = require('express'); const next = require('next'); const port = parseIn ...

Looking to incorporate fontawesome into my nextjs 13 project, I've been experimenting with various solutions. Tried implementing solution #3 from an old post as well as following the guidelines provided in the fontawesome documentation. Starting out with n ...

My component is rendered server side (next.js). Embla Carousel does not work with server rendering. const [viewportRef, embla] = useEmblaCarousel( { slidesToScroll: "auto", axis: "y", skipSnaps: true, ...

Is there a way to incorporate the use of lottie in a Next.js project (App Structure) in order to load an animated logo seamlessly? I attempted to include "use client" without success, and also tried importing Lottie from react-lottie as a dynamic import. ...

Currently, I am utilizing the next-auth module in my project. By integrating the mongodb adapter, users are automatically created in the database with basic information such as name, email, and avatar. However, I require additional data to be added on top ...

I am exploring ways to convert just two pages within my Vue3 project to be server-side rendered for improved SEO without having to switch to Nuxt.js. Your assistance in this matter would be greatly appreciated. My attempt to use Node.js configurations ba ...

I currently have a collection of products that are accessible on my website through a straightforward function within a server component. async function getData() { const res = await fetch(`${apiPath}`); const data = (await res.json()) as PackProps ...

Seeking guidance on reducing the package size of a ssr application (next.js & serverless-framework) to meet AWS's 250MB limit: An error occurred: ServerLambdaFunction - Unzipped size must be smaller than 262144000 bytes (Service: AWSLambdaInternal; Status ...

Recently, I transitioned to working with Next.js after previously using React. The project I am currently working on requires the use of Next.js. The application consists of a home page with simple backend data and a form that will definitely require serv ...

Hello, Developers! command: => cross-env NODE_ENV=production node server.mjs Error node:internal/errors:464 ErrorCaptureStackTrace(err); ^ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json" for /home/windows/Docume ...