So I've been getting in to Flux the last couple of days, and more specifically I have chosen the alt flux implementation to work around. Mostly because of they way it handles server side rendering, which I thought was very nice. I am also using React Router (1.0.0-beta3 for now)
I have a problem with where to initialize my stores with data. My application uses server side rendering, thus I can fetch initial data from the API when a request comes to my server, and depending on the path that the user has entered I can fetch different data. (Is this correct? Seems kinda odd to me, since the purpose of SSR is avoiding the "blank white screen" but now we have to wait for async callbacks before sending back the server rendered DOM?)
But what if my user clicks on the Navbar for example, changing the path in react router? How do I initialize a store with new appropriate data now? If i understand everything correctly, this will not trigger another request from the server. It will simply rerender on the client using the bundled javascript. What do I do in this situation?
Say for example that I have a ProjectsStore that on /projects contains all projects that a company has ever done, but on /company/projects it only contains the projects for that specific company. How would I go about changing the data in this store?
Related
I'm building an application using next.js, there is a need to fetch a guest token from an api and set in the cookie as it would be needed throughout the application. So the first thing I want is the token to be set in the cookie before any page is loaded.
I'm migrating from react, there this logic was there in the app.js file and it was a single page application.
I tried putting the logic in getServerSideProps in the home page, it worked fine and the cookie was set, but the issue was if the user go to any other page first directly, the cookie won't be there. To achieve that we have to duplicate this code in that page as well. (which I don't want as there are lot of pages)
Then on further research, I came to know that we can use getInitialProps in the _app file, that fetches the initial data for all the pages but it comes with a warning (This disables the ability to perform automatic static optimization, causing every page in your app to be server-side rendered.) Not sure if it would be ideal for this case.
Is there any other solution, like some kind of wrapper we can use on top of _app to fetch the token server side and store it.
I'm new to next.js, please help me with this.
If you want to share the same server side logic to all the pages you could use next middleware or next custom server.
Consider that middleware use a subset of the nodejs runtime features so to perform http request you have to use the custom server. AIf you want you can then left to the middleware just the set/check of the cookies.
I'm trying to wrap my head around this problem I'm having. Let me break it down for you.
I have a Nuxt project, which utilizes a modular store.
I have a global middleware that only runs server side (meaning when the page is refreshed).
This middleware is used to check if there's a cookie with user data, if so I'm making a post request to Firebase to evaluate the refresh token and fetch the user meta information (such as display name, etc). (I also tried using NuxtServerInit, I get the exact same problem)
All of this works perfectly. It runs just fine and by logging everything I know it is working and the state is changed.
In a loginUser() method, it sets the state of the application. (A token and display name value). When I login through the web app itself the cookie gets set properly and the state as well. The token is stored there and the display name as well.
However if I refresh my page it goes through the middleware and sets the state, but then on render it seems to be discarding all these changes I made to the store on server side and resets the store ready to be used on the client side.
Am I missing a nuxt configuration here? Do I have to setup a specific key to tell nuxt to preserve the server side rendered store?
Does anybody have any experience with this happening? If so please point me in the right direction.
If, like me, you are doing something with the component in which your props for the state are programmatic whilst on the server, but get set as a component element on the client, then you should check whether they are set as props or as attributes on the client side. I think that, as it is rendered on the server, the attributes can be interpreted as props, but as they settle in the frontend, they become unreadable, and so the state disappears. This leads to the effect of seeing the page look correctly rendered for a split-second, only to then rerender without the correct state.
I'm currently designing a MEAN.js web application, and for some reason, whenever I refresh the page on a route or window.reload, it does not rerender the page, but only returns the JSON file found at that current route.
For example, when I'm at localhost:8080/people:
If I click here from the main page, I get
But if I hit refresh or reload the page for whatever reason I get
Does anyone have any idea why this is happening and how to fix it?
Presumably you are using what Angular call's html5Mode routing.
This uses pushState and friends. These are browser features designed to allow you to build a web app which has what appear to be separate pages with unique, real URLs but when you change the page you actually modify the DOM of the current page (to State B) instead of loading a new one from scratch.
The design intention for pushState and friends is that if you request the unique, real URL that maps onto State B then the server will provide the browser with the HTML for State B directly.
This means that:
if you arrive on the site without going to the homepage first, then you
load the content you are trying to load directly (which is faster than loading the homepage and then modifying it with JavaScript).
if you arrive on the site without JavaScript working (which could be for many reasons, then everything still works. See also Progressive Enhancement and Unobtrusive JavaScript.
What you've done wrong is that your URLs are mapping onto your JSON based API instead of server side processes that generate the pages.
You need to write the server side processes. You could consider using the Accept header to allow them to share URLs with the API (so the server returns either JSON or HTML depending on what the client says it accepts).
Ancient website:
User navigates to url via bar or href, server call is made for that particular page
The page is returned (either static html or html rendered on server by ASP.NET
MVC, etc
EVERY page reloads everything, slow, reason to go to SPA
Angular 2 SPA:
User navigates to url via bar or router
A server call is made for the component's html/javascript
ONLY the stuff within the router outlet is loaded, not the navbar, etc (main advantage of SPAs)
HOWEVER, html is not actually received from server as is, Angular 2 code/markup is - then this markup is processed on the CLIENT before it can be displayed as plain HTML, which the browser can understand - SLOW? Enter Angular Universal?
Angular Universal:
First time users of your application will instantly see a server rendered view which greatly improves perceived performance and the overall user experience.
So, in short:
User navigates to url via search bar or router
Instead of returning Angular components, Angular Universal actually turns those components into html AND then sends them to the client. This is the ONLY advantage.
TLDR:
Is my understanding of what Angular Universal does correct? (last bullet point above).
And most importantly, assuming I understand what it does, how does it achieve this? My understanding is that IIS or whatever just returns requested resources, so how does Angular Universal pre-process them (edit: I would basically running something akin to an API that returns processed html)?
This HAS to mean that the server makes all the initial API calls needed to display the initial view, for example from route resolves...correct?
Edit: Let's focus on this approach to narrow down the question:
The second approach is to dynamically re-render your application on a web server for each request. There are still several caching options available with this approach to improve scalability and performance, but you would be running your application code within the context of Angular Universal for each request.
The approach here:
The first option is to pre-render your application which means that you would use one of the Universal build tools (i.e. gulp, grunt, broccoli, webpack, etc.) to generate static HTML for all your routes at build time. Then you could deploy that static HTML to a CDN.
is beyond me. Seeing how there is a bunch of dynamic content there, yet we preload static html.
I'm trying to use react-router right now, with express.js. My final objective is:
When a URL hits the server, it will use server-side rendering to render the output.
Once in the client, future clicks on the Link component will cause react-router to render on the client (no need to do a full round trip to the server).
What I got so far:
Make server rendering like this.
Make the Link component to work properly, when I render on the client.
My problem:
Once I render on the server, the ouput is not interactive. I mean, no event handler is associated with the DOM. That's comprehensible. What I'm looking for, though, is a way to blend server and client rendering. I mean, the server renders the output but somehow it gets interactive in the client. If I get this, I'll be able to use Link on the client and that will fulfill my needs.
If you call React.render(component, element) on the client where element points to a DOM node that contains your server-rendered React markup and component is instantiated with the same props as on the server (and assuming the props/state matches all the way down), React will transparently upgrade your static markup into an interactive React app.
See this JSFiddle example that demonstrates this technique: http://jsfiddle.net/BinaryMuse/ddvdppeg/ (note that there is a 1 second delay before the markup is upgraded to an interactive app, but only for demonstration purposes).