I'm building a react app using create-react-app. The app is almost complete. But now I need to add SSR to this. (Maybe not exactly SSR, but just to make sure that server responds correctly if the user hits the url). I read that one solution for this is to send index.html for any request that matches /app*. I did that, but here is the problem:
The subsequent routes are dependent on the data retrieved on the previous page. For ex - if I have 2 nested routes /app/abc & /app/abc/def, the data for component rendered for 'def' is dependent on the data retrieved at 'abc'. So, when a user hits enter on '/app/abc/def', the data does not get loaded.
How can I handle this ? Please point me to any resource if possible.
Related
User requested data -> browser sends request to server -> Server sends the data -> browser received the data -> now usually if the response is html page,browser rerenders whole html page by reloading, which decreases user interactivity...
contrast to this, if the browser received only data rather than full html, then it calls spa framework like react to update some part or full render.
How does browser knows that it should call spa framework and how does it know when to do full reload and update the whole page?
consider ,If the browser does not know, just it calls spa framework in both the cases (either when it receives full html or just json/xml data) ,now spa recieved data, what is the point of reloading the page? just it can update the whole page without reloading right?
If my concepts are wrong, please correct me .
I want to make sure that a certain React application is always on my website and if that is not the case (because the URL is broken or because of an error in the React app for example) then I want to receive some kind of alarm/notification.
Given a URL to some website, how to continuously keep checking whether the page reached via that URL contains the content (React application) that I want it to contain? Is there some way to set up an automated test that runs every X minutes which checks whether the React application is on the page and which will notify me if it's not on the page?
For example, this page contains multiple React applications. By inspecting the page we can see that there is a <div class="deals-react-app"> which contains a React application. The final solution/approach should work for this example and then also for any React application on any page.
Route53 has health checkers that can check HTTP and HTTPS health checks with string matching:
Route 53 searches the response body for a string that you specify. The string must appear entirely in the first 5,120 bytes of the response body or the endpoint fails the health check.
If this is not suited, then you have to develop your own custom solution. For example a lambda function running on a schedule that queries your website and verifies if its working.
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I have a backend using express to serve a static directory, to the path /, in which is contained a single page frontend. This backend also serves an API REST.
The frontend is built in React, and uses react-router to route the user from the different views of the web application.
If my react-router have two entries, let say /app and /config,
how can I redirect the client to that view of the application, if the user enters directly the URL in the web browser's address bar?
Right now, if I do that, Express gets the request and obviously returns a 404 message, as the single page is served to / path.
A simple way to resolve that is to always (even on 404s) send to user the index.html in your express route handlers.
See: https://stackoverflow.com/a/25499007/2624575
However, you need to take care of some things:
1) Your React Router code should start to handle 404s: https://stackoverflow.com/a/37491381/2624575
2) You need to handle correctly the path to your assets (icons, css, js, etc), otherwise you'll send the same index.html to those kind of resources (which will make your page render incorrectly)
3) Make sure that react-router is using browserHistory (the history that doesn't use hashes #), This way React will be able to render your routes correctly
Hope it helps!
I'm thinking how to implement a SPA on Zend framework 2 using Reactjs? Haven't seen any tutorial that might help me. So, I was asking if this is possible. How would zf2 will handle the routes?
The routes are handled on the client side (by pushing URLs into browser's history so you can also use browser's back button for navigation)
Simply put, changing a route will not load a whole page from the server.
The server does not even know that your JS app is changing the URL in the browser (imagine you write by hand http://example.com#test while you were already on example.com; that #test thing is a fragment URL and it will never be sent to a server)
Instead, the JS application will respond to (once again, client-side) route changes by rendering a different page or section, and making some ajax calls to the server to fetch or update data.
Now let's see what the server should do:
send the first page (the "single-page") and the assets (CSS, JS) on
the first load
respond to app-originated AJAX API calls once the page is loaded and
the JS app has been started
That's why they call them "single page apps", because they do much of the logic and the presentation in the browser (DOM rendering, routes), and the server merely acts as a data layer, or a backend if you like this word better.