Next.js is caching my server side pages. How to disable that? - caching

I have an issue I'm having trouble to investigate: I have a production compiled server at https://preprod.weally.org/ (through nginx)
I opened the port 3000 to access directly the next server (http://preprod.weally.org:3000/)
My issue is that when I log in, I'm supposed to see a different content than a non logged user. Also editing an article should show the updated article immediately to all other users.
I noticed the returned page is correct only for its first display, it then always returns the same for any browser session: (refresh occurs only when I restart the server).
After incriminating nginx of caching for hours, I realized it was Next.js that was not calling the endpoint /api/graphql, but getting its content from cache.
My next.config.js is supposed to avoid caching (you can see the build output saying /api/graphql is server side rendered)
Note: when I run the server in dev mode (yarn dev), everything works as expected
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
generateEtags: false,
compress: false,
};
My question is: "what is the next step in my investigation?". I'm not feeling comfortable to debug the build process of next.js
Here's the "yarn build" output:
Page Size First Load JS
┌ λ / 3.46 kB 288 kB
├ /_app 0 B 167 kB
├ ○ /404 195 B 167 kB
├ ○ /about (1049 ms) 1.69 kB 169 kB
├ λ /api/auth/[...nextauth] 0 B 167 kB
├ λ /api/auth/callback/ignore-facebook 0 B 167 kB
├ λ /api/graphql 0 B 167 kB
├ λ /api/rest/[...restEndpoint] 0 B 167 kB
├ λ /business/[businessId]/detail 10.2 kB 295 kB
├ ○ /legal/data_deletion (2485 ms) 2.06 kB 169 kB
├ ○ /legal/privacy_policy (2510 ms) 8.6 kB 176 kB
├ ○ /legal/terms (2478 ms) 14.8 kB 182 kB
├ λ /request/[issueId]/detail 608 B 285 kB
├ λ /request/[issueId]/edit 46.5 kB 284 kB
├ ○ /signin (1143 ms) 1.94 kB 172 kB
├ ○ /signout (1111 ms) 2.46 kB 169 kB
└ ○ /signup (1094 ms) 1.73 kB 172 kB
+ First Load JS shared by all 167 kB
├ chunks/framework.3af989.js 42.6 kB
├ chunks/main.fa7488.js 24.5 kB
├ chunks/pages/_app.f19732.js 98.1 kB
├ chunks/webpack.32a7fa.js 1.72 kB
└ css/5d6d9ddf7d6a4cfee084.css 1.56 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)

Related

Heroku Deployment Failure - TypeError: Cannot read properties of null (reading 'useContext')

The full stack trace here:
https://pastebin.com/4sPgfuee
But a couple snippets:
TypeError: Cannot read properties of null (reading 'useContext')
at Object.exports.useContext (/tmp/build_758b0112/frontend/node_modules/react/cjs/react.production.min.js:24:118)
at Head (/tmp/build_758b0112/frontend/node_modules/next/dist/shared/lib/head.js:202:34)
at Wc (/tmp/build_758b0112/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
at Object.exports.useContext (/tmp/build_758b0112/frontend/node_modules/react/cjs/react.production.min.js:24:118)
at Head (/tmp/build_758b0112/frontend/node_modules/next/dist/shared/lib/head.js:202:34)
Does anyone know what this error means? I don't use useContext anywhere in my code. I was told it was an issue with the Image and Head tags in Next JS, and so I swapped them for and tags in my code respectively and got the same errors. I removed react-dom as one of my dependencies and it still gives this error. The project works on my local machine no problem. How do I get rid of this error?
Thinking about it a bit more, admittedly, the frontend folder I want to deploy to github isn't in the root of my project. But I found a work around where I have a copy of node_modules/ and my package.json file in the root where the package.json file is identical to the one in my front end except for this small feature:
EDIT: adjusted for full package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"engines": {
"node": "17.x",
"npm": "8.x"
},
"scripts": {
"dev": "next dev",
"build": "cd frontend ; next build",
"start": "next start",
"lint": "next lint"
},
"devDependencies": {
"bulma": "^0.9.4",
"eslint": "8.15.0",
"eslint-config-next": "12.1.6",
"ethers": "^5.6.9",
"fs": "^0.0.1-security",
"next": "^12.2.3",
"react": "^18.2.0",
"solc": "^0.8.15",
"web3": "^1.7.4",
"web3-utils": "^1.7.4"
}
}
Within my scripts section, I inserted the cd frontend command to get to the frontend folder to build the project. Could this have backfired on me?
EDIT: When I run npm run build on my machine from the frontend folder, I get
:frontend$ npm run build
> frontend#0.1.0 build
> next build
info - Loaded env from ~/Project/frontend/.env.local
./pages/ResplendentCard.js
39:22 Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element #next/next/no-img-element
39:22 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
(node:33657) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (5/5)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 5.76 kB 83.3 kB
├ └ css/149b18973e5508c7.css 655 B
├ /_app 0 B 77.6 kB
├ ○ /404 195 B 77.8 kB
├ λ /api/hello 0 B 77.6 kB
├ ○ /resplendent (480 ms) 4.59 kB 875 kB
├ ├ css/0de6f3d7089795f1.css 27.4 kB
├ └ css/0a7d2580efac90af.css 202 B
└ ○ /ResplendentCard (436 ms) 217 B 870 kB
+ First Load JS shared by all 77.6 kB
├ chunks/framework-45405dbdcddf505d.js 45.3 kB
├ chunks/main-43f32a18558cfd50.js 30.9 kB
├ chunks/pages/_app-8027895d08fe9881.js 510 B
├ chunks/webpack-f9a9a24bf6cd9a1b.js 897 B
└ css/179c343107565a9c.css 478 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
I assume this means it works. Yet when I run the build command from my root folder:
> frontend#0.1.0 build
> cd frontend ; next build
info - Loaded env from ~Project/frontend/.env.local
./pages/ResplendentCard.js
39:22 Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element #next/next/no-img-element
39:22 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
(node:33746) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data ...node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^
Error: Cannot find module '../frontend/node_modules/next/dist/shared/lib/constants.js'
Require stack:
- ~Project/frontend/.next/server/pages/_document.js
- ~Project/node_modules/next/dist/server/require.js
- ~Project/node_modules/next/dist/server/load-components.js
- ~Project/node_modules/next/dist/build/utils.js
- ~Project/node_modules/next/dist/build/worker.js
- ~Project/node_modules/next/dist/compiled/jest-worker/processChild.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.221 (~Project/frontend/.next/server/pages/_document.js:32:18)
at __webpack_require__ (~Project/frontend/.next/server/webpack-runtime.js:25:42)
at Object.105 (~Project/frontend/.next/server/chunks/105.js:375:18)
at __webpack_require__ (~Project/frontend/.next/server/webpack-runtime.js:25:42)
at __webpack_exec__ (~Project/frontend/.next/server/pages/_document.js:70:39)
at ~~Project/frontend/.next/server/pages/_document.js:71:70 {
type: 'Error',
code: 'MODULE_NOT_FOUND',
requireStack: [
'~Project/frontend/.next/server/pages/_document.js',
'~Project/node_modules/next/dist/server/require.js',
'~Project/node_modules/next/dist/server/load-components.js',
'~Project/node_modules/next/dist/build/utils.js',
'~Project/node_modules/next/dist/build/worker.js',
'~Project/node_modules/next/dist/compiled/jest-worker/processChild.js'
]
}
Node.js v17.2.0

Angularfire | ng deploy | Cannot read property 'printf' of undefined

I have a problem when I try to run ng deploy on a recently created Angular project. The version I'm using is 9.1.6 (I just upgraded from 9.1.5, where I got the same error). ng serve works probably.
(base) paul#Pauls-MacBook-Pro must-have % ng deploy
📦 Building "must-have"
Another process, with id 4426, is currently running ngcc.
Waiting up to 250s for it to finish.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.690002c25ea8557bb4b0.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.9e286f6d9247438cbb02.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {1} main-es2015.658a3e52de1922463b54.js (main) 467 kB [initial] [rendered]
chunk {1} main-es5.658a3e52de1922463b54.js (main) 545 kB [initial] [rendered]
chunk {4} styles.c86817c326e37bf011e3.css (styles) 62 kB [initial] [rendered]
Date: 2020-05-16T16:06:16.041Z - Hash: a4ca944a427d0323601e - Time: 68781ms
Cannot read property 'printf' of undefined
(base) paul#Pauls-MacBook-Pro must-have %
My versions:
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.900.7
#angular-devkit/build-angular 0.901.6
#angular-devkit/build-optimizer 0.901.6
#angular-devkit/build-webpack 0.901.6
#angular-devkit/core 9.1.6
#angular-devkit/schematics 9.1.6
#angular/cdk 9.2.3
#angular/cli 9.1.6
#angular/fire 6.0.0
#angular/material 9.2.3
#ngtools/webpack 9.1.6
#schematics/angular 9.1.6
#schematics/update 0.901.6
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
The fix is available in version 6.0.0-rc.2 of #angular/fire. Upgrade to 6.0.0-rc.2 by
ng add #angular/fire#next
I had this problem and every ng add #angular/fire#next did not help.
I am using angular8, angular fire and firebase hosting. So, I build the project using ng build, and then deployed on firebase hosting using firebase deploy.

Vuetify: Automatic treeshaking in Nuxt.js

I'm trying to get the automatic tree-shaking functionality provided by the Nuxt.js / Vuetify module working. In my nuxt.config.js I have:
buildModules: [
['#nuxtjs/vuetify', {treeShake: true}]
],
However, I'm only using one or two components at the moment, but I'm still getting a very large vendor.app (adding the treeshake option had no effect on size)
Hash: 9ab07d7e13cc875194be
Version: webpack 4.41.2
Time: 18845ms
Built at: 12/10/2019 11:04:48 AM
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.2 KiB [emitted]
5384010d9cdd9c2188ab.js 155 KiB 1 [emitted] [immutable] commons.app
706a50a7b04fc7741c9f.js 2.35 KiB 4 [emitted] [immutable] runtime
8d5a3837a62a2930b94f.js 34.7 KiB 0 [emitted] [immutable] app
9d5a4d22f4d1df95d7a7.js 1.95 KiB 3 [emitted] [immutable] pages/login
LICENSES 389 bytes [emitted]
a0699603e56c5e67b811.js 170 KiB 6 [emitted] [immutable] vendors.pages/login
b1019b7a0578a5af9559.js 265 KiB 5 [emitted] [immutable] [big] vendors.app
b327d22dbda68a34a081.js 3.04 KiB 2 [emitted] [immutable] pages/index
+ 1 hidden asset
Entrypoint app = 706a50a7b04fc7741c9f.js 5384010d9cdd9c2188ab.js b1019b7a0578a5af9559.js 8d5a3837a62a2930b94f.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
b1019b7a0578a5af9559.js (265 KiB)
ℹ Generating pages 11:04:48
✔ Generated / 11:04:48
✔ Generated /login
Notice the line indicating the large vendors.app
Notice: b1019b7a0578a5af9559.js 265 KiB 5 [emitted] [immutable] [big] vendors.app
Can you please advise?
My mistake, the above configuration is working correctly. The real issue is the file size of the CSS being included (for all components) included in the build.
For people suffering from the same problem, adding build: {analyze:true} to nuxt.config.js shows where the problem files are (automatically opens in a browser window when running npm run build).
Clearly main.sass is the issue here. I will ask the question of how to get Nuxt/Webpack to only use CSS modules for relevant components in another question. The article here only shows how to do it with the CLI, not Nuxt.
Edit: I've now added the extractCSS:true property to my Nuxt config and the file size is reduced to a few kb..
build: {
analyze:true,
extractCSS: true
}

Saving a file causes multiple "File Event [change]" when only one file has been changed

When using "npm run watch", I save the file and i get multiple file changed events when i have only saved one file.
I have read through documents for browser sync and i cant seem to find anything about only monitoring one file.
/css/admin.css 38.3 KiB /js/app [emitted] /js/app
/css/app.css 128 KiB /js/app [emitted] /js/app
\css\general.css 135 KiB [emitted]
+ 1 hidden asset
[Browsersync] File event [change] : public\css\app.css
[Browsersync] File event [change] : public\css\admin.css
[Browsersync] File event [change] : public\css\admin.css
[Browsersync] File event [change] : public\css\app.css
[Browsersync] File event [change] : public\css\general.css
So I figured it out.
What webpack is doing makes sense. Those files where changing because they were being compiled every time i saved.
What i did to resolve the issue was to tell Webpack to watch my scss, js & blade files instead.

Loading slow: LESS - Bootstrap variables cause waiting time

I have the following setup:
Joomla! 3.2.2, Bootstrap 3.1 with LESS.
I tested my page loading time and got a bad result, mainly because of LESS.
The loading time overall was 7.96s. The waiting for bootstrap/LESS variables was 5.3s!!!
It loads all the bootstrap variables:
template.less ~.com/templates/c~/less/ 9.1 kB
bootstrap.less 1.3 kB
variables.less 19.6 kB
mixins.less 24.2 kB
normalize.less 7.4 kB
print.less 1.9 kB
scaffolding.less 2.1 kB
type.less 5.3 kB
code.less 1.3 kB
grid.less 2. kB
tables.less 4.5 kB
forms.less 9.2 kB
buttons.less 3.7 kB
component-animations.less 786 B
glyphicons.less 14.8 kB
dropdowns.less 4. kB
button-groups.less 5.1 kB
input-groups.less 3.5 kB
navs.less 5.1 kB
navbar.less 13.8 kB
breadcrumbs.less 817 B
pagination.less 2.1 kB
pager.less 1.1 kB
labels.less 1.3 kB
badges.less 1.3 kB
jumbotron.less 1.2 kB
thumbnails.less 1. kB
alerts.less 1.7 kB
progress-bars.less 1.8 kB
media.less 1.1 kB
list-group.less 2.1 kB
panels.less 4.2 kB
wells.less 812 B
close.less 96 B
modals.less 3.3 kB
tooltip.less 2.8 kB
popovers.less 3.5 kB
carousel.less 4.8 kB
utilities.less 1. kB
responsive-utilities.less 5. kB
That's fine by me. I won't even comment out many to perform better, becasue I need most of them.
But is there a way to raise the speed of page load in any kind of way?
It's basically not the rendering of the styles but the waiting time for server actions for loading the variables that let it take long. pingdom.com: "The web browser is waiting for data from the server".
If you are concerned about performance, you want to compile the less files and upload the resulting CSS to the server. Compiling on the server is convenient for development but not such a great idea in production.

Resources