Why this is working? do you think it would create issues?
getInitialProps on _app
and getStaticProps in the index.js
On-Demand Revalidation on the '/' page
Related
According to the Next.js docs:
Generally you'll want to use build-time environment variables to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with Automatic Static Optimization.
and
A page that relies on publicRuntimeConfig must use getInitialProps or getServerSideProps or your application must have a Custom App with getInitialProps to opt-out of Automatic Static Optimization. Runtime configuration won't be available to any page (or component in a page) without being server-side rendered.
This is confusing for me to read. The 2nd paragraph tells me a page has to be server-side rendered if using runtime config, so you have to opt out of Automatic Static Optimization. The 1st paragraph tells me runtime config is incompatible with Automatic Static Optimization.
If I do this:
const Page = (): JSX.Element => {
const config = getConfig().publicRuntimeConfig;
console.log(config);
return (...);
}
export default Page;
This seems to work no problem. Also when building the app, the build result never indicates that any page is server-side rendered at runtime, except the API endpoints. All the pages are either rendered as static HTML (no initial props) or automatically rendered as static HTML + JSON (uses getStaticProps).
I want all pages that can be rendered at build time to be rendered at build time, but the documentation confuses me regarding if I can use runtime configuration or not combined with static generation. Can I? And can someone clarify what the documentation means here? Can someone elaborate on why not recommend runtime configuration?
I'm trying to add push notifications to my svelte site using Firebase/Google Cloud Messaging (FCM), and a service worker JS file needs to exist at the absolute path: https://example.com/firebase-messaging-sw.js . However, Vitejs is bundling this with the other svelte/js code in my project. I can manually place the file there, but then it won't be transpiled. Aka these imports here won't work in the file:
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
So how do I tell Vite not to bundle this file and have it output at the root dir?
Alternatively, I saw there might be a way to pass a service worker differently, if that removes the need for the js file please let me know roughly how it's done.
Thank you.
I want to create a dynamic nav menu based on my /pages directory to scan the folder and update menu links automatically as I add new files. I am trying this in stages.
Stage 1: I have created a standalone navbar page with its own getServerSideProps to read the file system and return /pages. This works fine.
Stage 2: I want this to load on every page but _app doesn't support its own getServerSideProps and Next js won't call getServerSideProps on my Navbar if I import it as part of my wrapper template into _apps.
Is there a way to create a shared component that loads with _app and can also read from the server?
As far as I know there is no approach of doing that directly inside the custom _app because, like your already mentioned _app does not support it's own getServerSideProps (yet).
Possible approach
Your could use ISR so the server checks the directory periodically for changes, then when reading the contents of the page directory save the retrieved data as json to a file on the disk and import it back into the navbar component.
I followed the tutorial of david east to make an angular universal app and deploy it on firebase hosting. I tried this and it worked with normal routes but with lazy loaded routing it did not work.
here is the screen shot of the view page source,
view page source
why this is not working when routing? Can someone tell me how to configure Server side rendering for lazy loading or share any links about it?
You can check this guide from the official Angular CLI docs how to make lazy loading work if you do ssr with the angular cli. It's the same method as in your video tutorial.
However, until few days ago, it had the following statement at the bottom which was saying:
Caveats
Lazy loading is not yet supported, but coming very soon. Currently lazy loaded routes aren't available for prerendering, and you will get
a System is not defined error.
If you look at the revision history, you can see that it just was changed to revision 1.5.0-beta.4. Probably you have to upgrade your CLI to that version to make it work that way.
i found a solution in this article about lazy loading components :
https://blog.khophi.co/angular-module-lazy-loading-like-pro/
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const appRoutes: Routes = [
{ path: '/', loadChildren: './home/home.module#HomeModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule'},
];
export const AppRouting: ModuleWithProviders =
RouterModule.forRoot(appRoutes);
With npm being the recommended packaging system as of Meteor 1.3, I now have both server-side and client-side packages in my node_modules directory. Meteor attempts to bundle all of these into one huge modules.js file.
The only way to get meteor to completely ignore files appears to be to change the file or directory name (1, 2).
But I don't want to completely ignore the files - Some modules I need only on the server side, some only on the client side.
Is there a way to get Meteor to only include certain node modules in the client side bundle, perhaps through creative naming or hacking .babelrc?
Everything needs to go into the bundle, which you place on the server. When you go to your web site, the server makes your HTML, CSS and JS available and is loaded into the browser. Only the node modules needed by your browser get loaded.
There is no need to do this :)
Hide them in server folder and import them indirectly.
To exclude certain npm node_modules from being bundled into the massive modules.js file and prevent useless megabytes of script being sent to the client: conditionally require a file that itself imports modules from within a server folder.
Like so:
/* /my-import-file.js */
import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
module.exports = require('./server/server-only-file');
}
And the file that actually imports your large, useless-on-the-client npm modules:
/* /server/server-only-file.js */
// Import some modules that will NOT be sent to the client
import mailgun from 'mailgun.js';
import cheerio from 'cheerio';
import juice from 'juice';
export { juice, cheerio, mailgun };
Your other code can then do like so:
import { Meteor } from 'meteor/meteor';
import myImport from '/my-import-file'
if(Meteor.isServer){
myImport.doServerOnlyStuff();
}