Really slow site refresh when editing something in dev mode
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
I don't know how can i check if hot reload is enabled or not but its not working at 90% of the moments
And when i refresh it manually it takes 5-10 seconds to refresh and it's really annoying
Here is my environment :
tsconfig.json :
Next config :
Package.json (dependencies removed due to limit) :
And when i refresh it manually it takes 5-10 seconds to refresh and it's really annoying
Here is my environment :
tsconfig.json :
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}Next config :
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfigPackage.json (dependencies removed due to limit) :
{
"name": "vectra",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
},
"devDependencies": {
"@types/node": "20.11.30",
"autoprefixer": "^10.0.1",
"concurrently": "^8.2.2",
"eslint": "^8",
"eslint-config-next": "^14.2.1",
"postcss": "^8",
"tailwindcss": "^3.3.0"
}
}
194 Replies
Asiatic LionOP
By the way i'm using typescript
My providers.tsx :
'use client'
import {NextUIProvider} from '@nextui-org/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";
import {useRouter} from 'next/navigation'
import { SessionProvider } from "next-auth/react";
interface ProvidersProps {
children: React.ReactNode;
}
export function Providers({ children }: ProvidersProps) {
const router = useRouter();
return (
<SessionProvider>
<NextUIProvider navigate={router.push}>
<NextThemesProvider attribute="class" defaultTheme="dark">
{children}
</NextThemesProvider>
</NextUIProvider>
</SessionProvider>
)
}and layout.tsx :
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
);
}Asiatic LionOP
.
Asiatic LionOP
Really no one knows???
At least give some suggestions what to do
Try using the turbo?
@Jboncz Try using the turbo?
Asiatic LionOP
How?
Masai Lion
@Asiatic Lion
Masai Lion
remember to check your network tab at the browser console
That too.
@Masai Lion remember to check your network tab at the browser console
Asiatic LionOP
What expected to be seen?
I know about the profile-image
I just added it
Thats not the problem
@Asiatic Lion What expected to be seen?
Masai Lion
monitor the requests when you make changes to your code. You should see requests for the updated JavaScript files. If you don't, well... uhhh that's scary
Layout taking awhile to get though, I wouldnt expect it to take 2 seconds to load the layout
Masai Lion
also, make sure that hot reload is enabled in your Next.js configuration. In your next.config.js file, you should have experimental: { reactRefresh: true } to enable fast refresh. **please don't believe me, im not sure if this is the correct experimental
@Jboncz https://nextjs.org/docs/architecture/turbopack
Masai Lion
also, @Asiatic Lion read this
Yeah I mean hot reloading isnt super fast but def shouldnt take 30 seconds.
even my 4gb ram doesnt take more than 30 seconds
Asiatic LionOP
Hmm lemme check
@Masai Lion even my 4gb ram doesnt take more than 30 seconds
Asiatic LionOP
I have 16gb of ram
Asiatic LionOP
i don't think its because of my spaces
@Asiatic Lion I have 16gb of ram
Masai Lion
4gb >> 16gb
Oh, I didnt see that either, that is pretty quick lol
@Jboncz Oh, I didnt see that either, that is pretty quick lol
Asiatic LionOP
What????
It takes forever coding with 5 seconds refresh time
@Jboncz Oh, I didnt see that either, that is pretty quick lol
Masai Lion
yeah lol, like no shit, why my brotha wants more
I mean are you saving after every letter?
Asiatic LionOP
Especially for me that i'm learning nextjs
@Asiatic Lion It takes forever coding with 5 seconds refresh time
Masai Lion
lol what you doing, saving the file every milisecond?
Asiatic LionOP
I have to refresh in like 2-3 changes
@Asiatic Lion Especially for me that i'm learning nextjs
Masai Lion
LOL,nah man
you dont need less than 5-10 seconds
I understand what your saying, but I mean the time it takes is the time it takes. My system does refresh faster than that using turbo.
@Masai Lion also, make sure that hot reload is enabled in your Next.js configuration. In your next.config.js file, you should have experimental: { reactRefresh: true } to enable fast refresh. **please don't believe me, im not sure if this is the correct experimental
Asiatic LionOP
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfig@Jboncz I understand what your saying, but I mean the time it takes is the time it takes. My system does refresh faster than that using turbo.
Masai Lion
exactly, time is time and sadly we can't just put a number and tell the process "Yo dude, i want you to complete in exactly 2 seconds"
@Jboncz I understand what your saying, but I mean the time it takes is the time it takes. My system does refresh faster than that using turbo.
Asiatic LionOP
I don't care if it's building better or not im just looking for speed in developing
but I also have a linux system running 64 gigs of ram and 300 cores lol
@Jboncz but I also have a linux system running 64 gigs of ram and 300 cores lol
Asiatic LionOP
Windows is bullshit in my opinion anyway
Turbo is for development.
Asiatic LionOP
Linux >>>>>> Windows
@Asiatic Lion I don't care if it's building better or not im just looking for speed in developing
Masai Lion
uninstall chrome
bro theres nothing we can do for you, at least it isnt in my knowledge
you can only use turbo
@Masai Lion bro theres nothing we can do for you, at least it isnt in my knowledge
Asiatic LionOP
Got it
I never tried turbo
I never tried turbo
Masai Lion
but like
Change your package.json to "dev": "next dev --turbo",
Asiatic LionOP
Lemme see how it looks like
@Jboncz Change your package.json to "dev": "next dev --turbo",
Masai Lion
very smart
@Asiatic Lion
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfig
Asiatic LionOP
And i don't have hot reload
I ussually actually add "devTurbo": "next dev --turbo",
cause there are SOME situations where you shouldnt use turbo. but its rare.
cause there are SOME situations where you shouldnt use turbo. but its rare.
@Asiatic Lion And i don't have hot reload
Masai Lion
yeah ignore that and change dev on your package.json
Hot reload is enabled by default
so dont worry about that
@Jboncz I ussually actually add "devTurbo": "next dev --turbo",
cause there are SOME situations where you shouldnt use turbo. but its rare.
Masai Lion
i know how to use turbo but i've never used it lol
for me is just skill issue and lack of patience
@Masai Lion for me is just skill issue and lack of patience
Asiatic LionOP
Same
Its faster, its passing most of the test cases, so I use it, but when I have an issue I immediately disable it to make sure the issue isnt a product of turbo
Asiatic LionOP
But i didn't know about turbo either
@Asiatic Lion Same
Masai Lion
then why you want to make it faster lol 😭
Cuase lack of patience duh
@Jboncz Cuase lack of patience duh
Asiatic LionOP
By the way taking too long to compile is okay yeah?
I mean....'taking to long' is subjective.....
@Jboncz I mean....'taking to long' is subjective.....
Masai Lion
exactly
depends
the question is DOES it compile?
Asiatic LionOP
What the heck
if it DOES compile, then you are fine.
Masai Lion
if you compile in more than 10 minutes i worry
@Jboncz if it DOES compile, then you are fine.
Masai Lion
the magic dev phrase
"if it works leave it like that"
Like I said turbo is experimental
@Jboncz Like I said turbo is experimental
Masai Lion
basically a baby
Sad, your using windows. lol anyways. show me how your importing modules?
@Jboncz Sad, your using windows. lol anyways. show me how your importing modules?
Asiatic LionOP
I have no choice💀😭
@Jboncz Sad, your using windows. lol anyways. show me how your importing modules?
Asiatic LionOP
Which file?
Uhhhh, globals.css
/app/globals.css
Asiatic LionOP
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground: #000;
--background: #fff;
--light: 212, 89%, 57%;
@apply select-none
}
@media (prefers-color-scheme: dark) {
:root {
--foreground: #fff;
--background: #000;
--light: 212, 89%, 57%;
}
}
body {
color: rgb(var(--foreground));
background-color: rgb(var(--background));
}
html {
scroll-behavior: smooth;
}
img {
pointer-events: none;
}Asiatic LionOP
import {nextui} from "@nextui-org/react";
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: {
light: "hsl(var(--light))",
},
backgroundImage: {
'vectra': "url('/public/images/vectra.svg')",
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
darkMode: "class",
plugins: [
nextui({
layout: {
disabledOpacity: "0.3",
radius: {
small: "4px",
medium: "6px",
large: "8px",
},
borderWidth: {
small: "1px",
medium: "2px",
large: "3px",
},
},
themes: {
light: {},
dark: {},
},
}),
],
}and postcss config :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}man you got a complicated setup for learning lol
I dont know anything about postcss. lol
@Jboncz man you got a complicated setup for learning lol
Asiatic LionOP
Got them from github actually😅 but i can understand it lol
Your learning project is a github repo?
that you downloaded from someone else?
Asiatic LionOP
The main page
I'm creating a dashboard page for it
I'm creating a dashboard page for it
Myself
Without even using AI
Lol ai is a really good tool if you use it right, use it to learn not do your work for you.
anyways. Whats the repo your using as your base?
Asiatic LionOP
lemme find it
postcss just seems like a waste of time lol
Asiatic LionOP
im asusming nextui uses it though
Masai Lion
@Asiatic Lion you are trying to do complicated stuff when you are learning
i would recommend you first adapt to the default environment of next
and then change stuff
Right. Honestly, I would use this to get started. https://ui.shadcn.com/docs/installation/next
@Masai Lion i would recommend you first adapt to the default environment of next
Asiatic LionOP
I mean i'm not that too beginner but still there is things to learn
this is the perfect starting point. complicated stuff is not abstracted away from you.
@Asiatic Lion I mean i'm not that too beginner but still there is things to learn
Masai Lion
exactly, you've never used next js before i suppose, so you haven't really felt the framework at all
The fact your complaining about 5-10 seconds for a server to recompile an endpoint then your front end to reload that endpoint indicates you are a begginner, which isnt a bad thing.
Asiatic LionOP
Nextjs is okay
I have problems with css things lol
I have problems with css things lol
but like lol
All in all... 5-10 seconds isnt a terrible reload time. I dont know what your issue is with turbo, I would have to fork the repo myself and test it but I dont have time to do that right now.
@Masai Lion exactly, you've never used next js before i suppose, so you haven't really felt the framework at all
Asiatic LionOP
I just created a calculator with nextjs first and then got to making agency website dashboard
@Jboncz The fact your complaining about 5-10 seconds for a server to recompile an endpoint then your front end to reload that endpoint indicates you are a begginner, which isnt a bad thing.
Masai Lion
tbh my computer takes like 20-25 seconds to compile and, totally my choice, it runs smooth lol
@Masai Lion tbh my computer takes like 20-25 seconds to compile and, totally my choice, it runs smooth lol
Asiatic LionOP
I have no problem with compile
I know it takes long
@Asiatic Lion I just created a calculator with nextjs first and then got to making agency website dashboard
Masai Lion
i think dashboards are also part of begginner courses
Asiatic LionOP
My problem was taking too long for a single change refresh
I mean my site takes like 10 minutes to build, and with turbo hotreloading takes 5-10 seconds
Masai Lion
not saying you are taking a course
Its not taking too long bud, thats what we are telling you.
Masai Lion
but normally dashboard creating courses are inside the begginner youtube bootcamps
Thats well within the expected timeframe for hotreloading in nextjs
Asiatic LionOP
And i got used to python ig so thats why this time for waiting is too long for me
Very different beast
very different
@Asiatic Lion And i got used to python ig so thats why this time for waiting is too long for me
Masai Lion
act python takes longer if you don't know how to use it
@Masai Lion act python takes longer if you don't know how to use it
Asiatic LionOP
Bruh i know python is slower than js
I mean honestly.... there are other frameworks that have faster hotreloading.... but.... it doesnt offer all the things next offers.
Asiatic LionOP
But i don't use it for rendering frontend
Im going to bow out here. I think I honestly answered your question best I can.
Masai Lion
i could say react.js but next is basically a beautiful mask for react
Asiatic LionOP
I used FastAPI with React to create but nextjs is really better
@Jboncz Im going to bow out here. I think I honestly answered your question best I can.
Asiatic LionOP
Ok thank you guys so much
@Asiatic Lion Ok thank you guys so much
Masai Lion
btw
dont forget to close the forum post if you odnt have any other equestions. Later and goodluck.
Masai Lion
we aren't trying attack you or make you feel bad
@Masai Lion we aren't trying attack you or make you feel bad
Asiatic LionOP
I know bro thats okay
Masai Lion
just trying to give our perspective that for us 5-10 seconds is alr
@Asiatic Lion I know bro thats okay
Masai Lion
alr : )
Short mackerel
hey guys, why is next.js in dev mode so slow? I am new to all of that
Asiatic LionOP
@Masai Lion @Jboncz Sorry for tagging you guys again
But i have anoher question
But i have anoher question
Why the hell my vscode intellisense is slow asf?
It really takes 1 minute to load
@Short mackerel hey guys, why is next.js in dev mode so slow? I am new to all of that
Masai Lion
It’s not that it’s “slow”, the thing is that depends of the file of the size and the things it has to debug
You cannot expect a big file to compile in 1 second
That’s not bad… but not good
@Masai Lion That’s not bad… but not good
Asiatic LionOP
Not bad?
bro this is the worst
Any way to fix it?
It works well in python
But it gets slow in js
@Asiatic Lion Any way to fix it?
Masai Lion
Bro this isn’t the channel or the place for that, lol
It isn’t a NextJs problem, you should probably reach out to Intellisense community
@Masai Lion It isn’t a NextJs problem, you should probably reach out to Intellisense community
Asiatic LionOP
yeah ig lol
@Asiatic Lion yeah ig lol
Masai Lion
ye dude, i don’t want to be rude but yeah, it’s more a Intellisense skill issue
@Masai Lion It’s not that it’s “slow”, the thing is that depends of the file of the size and the things it has to debug
Short mackerel
so it means that when deployed works much faster?
@Short mackerel so it means that when deployed works much faster?
Masai Lion
Yes and no, but you can potentially improve its performance for several reasons. First, deploying to a production environment typically involves optimizations such as minification, compression, and caching, which can reduce load times. Additionally, deploying to a platform with robust infrastructure and content delivery networks (CDNs) ensure that your app's assets are served quickly to users around the world (not always). Finally, deploying can also involve scaling your app across multiple servers or instances, spreading the load and improving responsiveness.
And completely the opposite with development
Debugging a Next.js app in development can be slower due to factors such as the lack of optimization prioritized for production, the overhead of server-side rendering, absence of caching or content delivery networks, and the resource consumption of monitoring and debugging tools.
Short mackerel
I mean, when I develop in react and hit save, the changes are instant. If I refresh the page same story. On next.js i have to wait decades.
I am working on a project and it really makes me go crazy, even spent 80 dollars on a template and nearly broke my mouse
I need to deliver it and I have no idea what to do
Is there a channel wher I can ask for help through screen share?
I am sure is something banal that might take just a couple of minutes but I am too stupid to do it myself.
@Short mackerel Is there a channel wher I can ask for help through screen share?
Masai Lion
You could try opening a new forum in here, but we can’t give you a whole code in here… think so
Short mackerel
I have the full code
I bought a precoded template in next.js
I just don’t know what to do
I started to learn web dev 3-4 days ago
I don’t understand s**t
From what I saw about the precoded template is easy peasy to deploy
In the guide they say it
@Short mackerel From what I saw about the precoded template is easy peasy to deploy
Masai Lion
I mean it should
Not 100% easy but
Where are you trying to deploy it?
And yeah, you should try opening a new forum
Just so mods don’t make us feel the ban hammer
Short mackerel
At the moment i have no idea where is better for performance
Is for a gohighlevel agency website
So i guess i can deploy it anywhere and then integrate it in gogighlevel somehow
This thread is closed, since it has been circling without a definite answer. Further discussions won’t help.
Nextjs dev mode being slow is a known issue and not your fault. The only thing you can do is to upgrade nextjs to get new performance improvements. You cannot do anything else, so if it is still slow by then, you have to live with it. It sucks, I know, but you can’t do anything about it.
Nextjs dev mode being slow is a known issue and not your fault. The only thing you can do is to upgrade nextjs to get new performance improvements. You cannot do anything else, so if it is still slow by then, you have to live with it. It sucks, I know, but you can’t do anything about it.