I have a Next.js 13 app that was deployed to the Edge on Cloudflare Pages with experimental: { runtime: 'experimental-edge' }, but requirements were updated and I need to include our feature flag dependency LaunchDarkly - and retrieve the feature flags via getServerSideProps.
Inside getServerSideProps I tried launchdarkly-node-server-sdk, launchdarkly-node-client-sdk, and launchdarkly-js-client-sdk, but they either require a Node specific library (fs and others) or window.
launchdarkly-cloudflare-edge-sdk with #cloudflare/kv-asset-handler looks promising, so I followed the template, but I'm not sure how to extend a Next.js app to have this functionality. For example, do I put the worker into a middleware.ts function or somehow extend the vercel build step to include this functionality.
I haven't tested this out but I am guessing you may need to use the Cloudflare SDK throughout since Cloudflare would deploy the functions as Cloudflare Workers, which is a non-Node runtime.
In a typical Next.js deployment, you'd use the Node server SDK for any server side code (like getServerSideProps) but my assumption is that this may cause errors due to the fact that it relies upon some Node-specific APIs that I am not sure the Workers runtime supports. We (LaunchDarkly) are working on updates to our JavaScript SDKs to better support non-Node runtimes but I don't have an ETA on their release.
Related
I'm trying to share UI functionality between two Next.js apps, using ES modules.
I'm moving away from non-SSR apps using the SystemJS module format and wanting to avoid webpack's module federation scheme, hoping that the current standard ESM support across browsers and server is enough.
Next.js 11.1 blog post mentions work "on extensive ES Modules support in Next.js, both as input modules and as an output target" (emphasis added). However Next.js 12 post seems to focus only on importing ES modules.
I've tried using a custom webpack config, enabling config.experiments.outputModule, but it only affected the server side code (generated files in .next/server/pages did become ESM - breaking the build as expected with syntax errors). Using isServer to configure only the client side code seems to have no effect (code in .next/static stays the same).
Is this unsupported or am I doing something wrong? Thanks!
By default, a NextJs middleware is run using the Edge runtime and from what I understand this is because the middleware is meant to be run on the edge network instead of the main server (being run on the edge network reduces the latency so this offers improved performance in some scenarios).
The downside of this is that the Edge runtime comes with some restrictions in terms of what it can run (list here).
My question is: is there any way to make a middleware run using the default runtime instead of the Edge runtime?
In my situation, we're not hosting anything on the edge so the Edge runtime imposes some restrictions on us without providing any benefits. A possible workaround would be to use a custom middleware instead of a NextJs one, but unless this is the only choice, I would rather use the NextJs middleware architecture & plumbing instead of building our own.
P.s.: We're using NextJs 12.1.6 (latest version at the moment of writing this question)
There's no way to do it at the moment, but it's being worked on. See RFC: Switchable Next.js Runtime
At the moment if you need node apis in your middleware you can work around the issue by making api routes that do stuff with node apis and then calling them from your middleware. You should definitely try that one out instead of making custom middleware with custom server I assume, since custom servers have limitations.
Next.js 13 added option to change the runtime, but I don't think the setting applies to middleware. The setting can be used to make everything run on the edge though. https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#global-runtime-option
Now it's possible to determine at global and segment levels which runtime should be used with Next.js 13.
This configuration is for defining the runtime for global:
module.exports = {
experimental: {
runtime: 'experimental-edge', // 'node.js' (default) | experimental-edge
},
};
https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#global-runtime-option
If you want to determine at the segment (aka server component) level, the only thing to do is export a runtime constant variable.
[app/layout.js]
export const runtime = 'experimental-edge'; // 'node.js' (default) | 'experimental-edge'
https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#segment-runtime-option
I have an angular 9 application deployed in firebase. I am planning to implement Angular Universal SSR for SEO.
Could anyone please clarify my doubts regarding Angular 9 Universal + Firebase hosting.
(I am currently using Spark plan which does not includes cloud functions.)
Can I implement SSR without Firebase cloud functions ?
Also,
My website doesn't have API calls(other than Google Analythics on index.html), no database connectivity and no query string parameters. That means, my home page contents are always same**. In this case, can I use static server side rendering without cloud functions.
If this is possible, How to deploy the output to firebase ?
3.1, Will copy the dist folder contents to server works?
3.2 How to run SSR and non SSR version in my local?
Note: **My website is not static html page, I am providing some client side fuctionality using javascript/typescript code which does not have server calls.
Other than implementing Angular Universal, Is there any way to to achivbe SEO with Angular Apps?
This can be done via Angular pre rendering.
Prerendering does not requires cloud function or node support in server.
It is easy and Angular CLI version > 11 directly supports it.
Now Web crawlers can able to read the entire HTML content. Because the output of prerender is a rendered HTML file.
Steps
Install Angular Express Engine using the below command
ng add #nguniversal/express-engine --clientProject project-example
Run the below command
npm run prerender
Goto dist folder
Copy/deploy contents from the folder 'Browser' to server environment
Note that any code related to window, document, navigator will throw error and should be wrapped inside if condition like this.
if(isPlatformBrowser(this.platformId)){
// your code accessing window, document, navigator.
}
When i tried to add "Add-CORS" Assign message policy to an existing API proxy i got this Error repeatedly.
I tried to undeploy and re-deploy the App but none worked.
This is issue is because of bundle size and not because of CORS policy. Check if bundle size can be reduced. Or else please log a ticket with support to get help on the resolution of the bundle size.
It is something to do with the package size. If you are using NodeJS to develop your bundle:
Reduce your API Proxy bundle size by removing unnecessary files and un-used modules.
Import resources separately through the Management API
Run NPM install on the server through the Management API
[Replace the placeholders in URL with actual value]
See the discussion here.
I am just starting with Meteor and working on an existing project. I am running into an issue with one of the packages(observatory-apollo) that's has the following line:
__meteor_bootstrap__.app.use Observatory.logger #TLog.useragent
It is complaining that __meteor_bootstrap__.app is undefined.
What is __meteor_boostrap__ exactly? I can't seem to find a description of what it is but from threads, people seem to know how to use it. I can only see it defined in boot.js, but it doesn't really tell me much...
Meteor uses connect npm module under the hood for various reasons, to serve static files, for example. __meteor_bootstrap__.app was the reference to connect app instance.
Before it was __meteor_bootstrap__.app but it changed couple of releases ago and became WebApp.connectHandlers object and is part of WebApp package.
WebApp is a standard package of Meteor, core package for building webapps. You don't usually need to add explicitly as it is a dependency of standard-app-packages.
Example of usage the connectHandlers is to inject connect middlewares in the same way as you would use any connect middleware (or some express middlewares, express is built on top of connect):
WebApp.connectHandlers
.use(connect.query())
.use(this._config.requestParser(bodyParser))
You can look at meteor-router Atmosphere package and take it as an example: https://github.com/tmeasday/meteor-router/blob/master/lib/router_server.js
More about connect: https://npmjs.org/package/connect