Hi i'm currently using nextjs middleware to check authentication for every page
everything works fine when I'm navigating from the browser URL.
But when I try to navigate using next/link. it's skipped the middleware check.
I think this is by design on how next/link works because of the prefetch thing.
Is there a workaround that we can use to trigger nextjs middleware manually with next/link ?
import Link from 'next/link'
<Link href="/admin">Admin</Link>
I think it does not skip checking, in reality it is already done when you prefetch, If you want to check authentication/authorization please use
<Link prefetch={false} />
(in my opinion, I see powerful in nextjs middleware and I would like to use the same as you but we used it we can't use the prefetch feature because there has a lot of bugs that I found.
add this to your response
response.headers.set(`x-middleware-cache`, `no-cache`);
Related
Server Side Rendering (in Nuxt, but I think this is fairly universal) has been explained to me as:
When using Nuxt SSR, you request an URL, and get sent back a
pre-rendered HTML page. After loading, the browser starts the
hydration code, at which point the static page becomes a Vue SPA application.
I presume (perhaps incorrectly) that regardless that you are now in SPA mode, if you request a new page (eg. you are on "blog/ten-blue-things" you follow a NuxtLink to "blog/ten-red-things") the browser sends a new request to the server for this page, and effectively break SPA-mode? Or am I wrong?
I really hope the answer is that it does not make a request. In my scenario all the required data is very likely already available, and if not the page would make an API call to get anything missing to dynamically render the new page "blog/ten-red-things". Fetching a pre-rendered page after the first fetch is wasteful in my scenario where everything is already on the client (to clarify this further, this is a PWA offline-first app; I'm adding SSR for the SEO and social sharing of pages).
However, I also wonder that if it indeed does not make a request, does that (generally?) hold true for crawlers as well? I'd rather they DO make a separate request for each page in order for them to get the prerendered SEO-friendly version of the URL. If a crawler has js enabled, it may execute the hydration code, and then what?
Can anybody clarify this perhaps?
Does it matter for this anwser if instead of SRR we employ ISG (incremental static generation)?
It does not break the SPA mode, once you've SSR'ed and hydrated, the app stays as SPA. You can notice the fact that you don't have any "page reload" because you're doing a vue-router client-side navigation (as to oppose to a regular a link navigation).
The rest of the app will still be SSR'ed properly, you will not go back to the server meanwhile (as to oppose to Next.js).
They are several ways to debug all of this thanks to some devtools + trying to disable the JS/inspect the source code. But yeah, crawlers will properly parse the SSR'ed content.
PS: you can also choose what kind of rendering mode you want for a given page so if you want some to be SPA-only, you can. The rest could be SSR'ed (during initial render) + SPA after the hydration.
SSR or ISG will not make any impact regarding crawlers/SEO.
It works differently from SSR of course, but the rendering part will be the same regarding the markup. Only the "freshness" will be different.
I've set a custom server from the example but, my question is...
Can the server code access the NextJs code?
I mean, NextJs is built with webpack, therefore packed in its own context, so if I want to initialize something (let's say, database, logging system, etc.) in the server before NextJs has started, and then access it from NextJs... is it possible? I don't see how unless server code and NextJs code are in the same bundle, is it?
Yes, I guess there are some hacks that can be used, like importing files in runtime with __non_webpack_require__... but that seems like a hack (?) and only in one direction.
Any other better option?
If you use SSR in NextJS, you can access to APIs before rendering.
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
It fetches your data upon a user requesting your website everytime.
Thatmeans no matter what you build first on your server. Next.js will fetch for it every time. The comment above me sent the correct link. https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
TO view all data fetching techniques from next.js visit: https://nextjs.org/docs/basic-features/data-fetching/overview
PLease comment back to this to see if this helped, or if we missunderstood the question, so that we can help solve this issue, or if you resolved it. happy coding!
I'm a bit new to vue and nuxt, and I'm using firebase authentication with a custom token generation.
I'm looking for the best place to put the onAuthChange listener,
I'm trying to figure out if this should be implemented as middleware or maybe it could go somehow into the nuxt config
obviously, I want it to listen to the entire application all the time.
I found what I was looking for if someone else will ever encounter this question as well,
I've moved the listener to plugins and added the plugin to the nuxt.config.js file under the plugins section.
I'd like to create a magnolia app which will show content from extra page in the frame. I think it's possible, but cannot find any example how to do it.
Yes, it is indeed possible. What you are looking for is creation of custom app using EmbeddedPageSubApp. More details at documentation
If you want simple example, try to import and start this app. It should start simple JS game within your subapp.
Remember that any page you try to load in iframe will need to use same protocol as the main Magnolia app does or browser will most likely block it. In the example I gave, it would work only over http, but not over https, if you want to show something while people are connecting to your Magnolia over https, you would need to set url to be https too.
HTH,
Jan
this is my first question on stack overflow so please be kind!
I have designed a Symfony server based application with an almost complete backend interface. Using symfony router, i can login in the backend using a url (ex. www.domain.com/admin) and see backend pages.
Based on this backend, i want to create an Angular2 application for dealing with the front end. It is quite straight forward to make it working for the front page url (www.domain.com). However, if i use any subroutes which would otherwise work in an Angular2 app (ex. www.domain.com/inner-page), Symfony router takes over and throws a 404 Not Found - NotFoundHttpException.
The question is, how can i use both routers in "parallel"? Any URL under www.domain.com/admin will be handled by Symfony router, and any other url by Angular2 router?
EDIT
Thank you for your replies!
I have something in mind. It might not be elegant, since it will require manual exclusion of angular routes from symfony, and vice versa, but it will look cleaner. I am still working on it though, so its still a theoretical concept:
For each url containing "/admin/", Symfony router will serve backend twig-php pages as it is designed to do. For any other url however, a simple controller will just serve the angular app.
On the other hand, in the front end, Angular router will work as it would normally do. However, if a url contains "/admin/", it will be handled by an Angular component that will simply change window.location.href within its OnInit function to redirect to Symfony backend.
The angular app should be built separately, Symfony is a back end framework and isn't a good choice to use for building angular apps.
I created an example of how to use the 2 together, with FOS User Bundle and FOS OAuth Server Bundle to deal with authentication.
It's a couple of years old now, but should give you a good idea of how to go about using them together.
Github is down right now, but I'll update this with a link when it comes back.
edit:
https://github.com/mbates/Symfony2-AngularJs
There is AngularUI routing framework available in AngularJS for routing purposes in your AngularJS application. You can use Angular UI-Routing framework to govern your application's frontend while Symfony2 take care of the backend of your application. Angular JS UI-Routing URL's will looks like this,
www.domain.com/#page1
instead of this,
www.domain.com/page1
After the hash (#) the url will not be a part of Symfony2. The place where you map Symfony2 urls with Angular UI-Router urls will be within states. Take a look at this tutorial. I hope AngularUI will solve your issue :)
Cheers!