I have an web app. Basically its a single page application. The initial page is a flat html file called index.html, with a single script declaration pointing to require.js. From there I use backbonejs to handle the client side logic. The index.html is being served by nodejs.
My issue is that, any action within the page, for example, i click on a link, the backbone router is called. Which is the behavior I want being a single page application.
For example: www.testserver.com then i click on a link which shows a modal screen for registration www.testserver.com/register, via backbone router with push state on
The issue arrises when, instead of accessing a certain link within the app, i open the url straight in browser. For example I paste, www.testserver.com/register, in the browser. The request is then sent to my node router. I am assuming this is the correct behavior, since the page doesnt exist yet, meaning the backbone router doesnt exist as well.
I was wondering, on what the correct work around for this is. What am i supposed to do, when i access this link? How do i pass the correct behavior back to my backbone application.
Thank you very much.
The server should return always the index.html page. When you start the router in your Backbone than, the router handle the navigation and call the function you defined for the actual route.
Assuming you don't need to do any SEO type stuff such that each unique URL loads its own metadata, just always serve the same index.html as stated. However if you want to have different static head content based on the URL, you should do that within node based on the path (e.g. keep an array of metadata for each route that you slip into a slightly-more-dynamic initial view template, based on your existing flat index.html)
Related
I want a single dynamic route to handle all requests in this application, so I have written a file named [[...slug]].js to do so. I use getServerSideProps() for data loading, so it is server-side rendered, generally. I don't have any index.js files.
When it runs locally in development mode it works perfectly fine. When deployed (to Vercel) everything keeps working except links to /. <Link href={"/"}>… will request an index.json file from the server, get a 404 response and show error page. Why?
Gotcha!
I use getServerSideProps() to fetch data depending on the slug. (Actual content is from Sanity.io and is queried to see if the content's slug property matches either slug from the URL or a default page slug).
When running the app in local development mode with next dev, the params.slug argument will be undefined when loading the root ("/") URL. It has the same value whether the root URL is loaded by a refresh or a navigation action (clicking a link to /, using back button).
However, when the site is deployed, this behaviour changes. params.slug is still undefined when the page is first loaded, but if it loads in response to a client-side navigation event the slug is suddenly set to index. Since I neither had a page with slug index nor ensured we used the default slug when index was requested, I got unexpected 404 responses. Using "index" as one of the values that triggers the default slug fixes it.
I don't know if it is a bug in Next JS, but it was definitely a gotcha that confused me for a while.
When I add a javascript file in my index.html and I use some function it work just for the first time but when I refresh my page it not wokring so I need some way to include for each component a file javascript to avoid this problem
I think you're talking about routing. For Angular2 routes to work you need to make sure that the back-end server redirects all requests to your index page otherwise Angular will not be loaded, and will not be able to show the correct content/component for the current route
More on this here: Angular 2 rc4 can not go to page by typing the url to the address bar
I know how a MVC application handles routing,
(/foo/bar get) request hits the server
route /foo/bar with get method is found or not found, if found route handles the request by calling a method which serves a view page with corresponding data filled up.
client gets a html document with many links to other pages.
Another link is another procedure just like this one.
However, I have been learning react+meteor pack, which is a SPA (single page application) without ssr(server-side rendering). The most critical part that gets me confused is routing.Let's say I have 3 different routes for my SPA. (/), (/route2), (/route3)
(/route2) request hits the server. What does the server serve ? The whole application code with (/route2) active or what ?
Let s say we are on (/) route and clicked (/route2) route. So what s happening now ? Does react empty the #mainDıv and put related component instead, from where, the bundle.js which already contains all of the views' html as components ?
Is there a way to send only requested page's html and js, and after showing the content, getting other pages' html and js in the background, without client even feels. So that when another route is hit, only data will be on the wire.
Finally , only sending the related page's html - css - js when requested,I don t don't know if such a technique exists, seems to lack the SPA experience, but I am not sure If it would lack SPA expereince. It would be great to explain how to approach this issue.
With a SPA you typically (read: virtually always) configure your server to serve the same bootstrap HTML/Javascript regardless of which URL has been requested. A request for /route2 will get the same HTML response as a request for / or any other URL (unless you have specific exceptions for specific reasons). The SPA always starts with the same bootstrap code and examines the current browser's URL, then dynamically loads content as needed. How exactly that content is loaded and when it is loaded depends on the specific framework/code/circumstances/configuration, but yes, ultimately the contents of the DOM are dynamically being replaced by Javascript.
I want to allow users to request webpages of my website both directly from the server or using links, which will be handled by Backbone's router.
When a user requests a webpage directly from the server, a full page is served (with html, head, body, stylesheets and scripts).
On the other hand when a user requests a webpage by clicking on a link, only the relevant part of the page is requested and then inserted in the correct place, and other elements of the webpage remain untouched.
By inserting in the correct place I mean creating a View once a particular route is reached. The view is then initialized and calls its render method to fetch the relevant part of the webpage and inserts it into DOM using $el.html(content).
But I do not want to call the view's render method when a webpage was fetched directly from the server, because all needed content has already been rendered, and re-rendering it only causes some ui-flickering effects.
Is there some common way to let Views know that they shouldn't render themselves, because the fully rendered webpage has been fetched from the server?
I could pass a flag like clientSideNavigation = true to the router, everytime a link is clicked, which then will be passed to views by the router so that they know whether to render the content or not.
But it does not work when user uses aa back/foward buttons.
I could also check in a view if within its $el there is some particular element that should be present on this webpage - for instance if I had a view called CatsView I could check if #cats-box is within its $el element. But it involves some more DOM manipulations, which I would prefer to avoid.
Have a root view and have place holder for child views. First time render the complete page from the server.
For rendering parts of the view on link clicks, you can define corresponding events hash on the root view.
Let the event handler callbacks call a controller(custom js object) which does the job of loading the data ,constructing the view and passing the data to it.
Finally also update the url with Router navigate(http://backbonejs.org/#Router-navigate) method with {trigger:false} to the corresponding url, so then when refresh is hit, the user comes back to the same view.
In the router callback for the specified url call the same method on controller object by passing a flag so that the functionality is in sync and also using the flag you can prevent calling router navigate method since its not required.
I have an ember.js router based application with an interesting quirk. Since the router documentation is rather sparse, I'm not sure if this is a feature or a bug or an un-intended consequence of some of my code elsewhere.
When I reload the page containing the app in my browser, the App jumps to the route of where I last was. I have the routes serialized as a hash. So an example would be I'm on app.html#/users/1/details and I delete the hash and add a random query variable app.html?reload=randomnumber and load the page. As soon as ember loads, it is adding the #/users/1/details back to that address.
Is this a feature/consequence of ember, or is it some junk that I wrote. I haven't found anything that I wrote that could be causing this so far.
If it is an ember feature, is there a way to disable it?
What are you calling "reload", exactly?
Ember cannot keep any state in your browser when route is serialized using a hash. It has nothing to see with Ember: when reloading the page, the whole state is lost, and reset according to requested url returned content initializations.
Nevertheless, when a hash is present, it is used by Ember to reset the router's state.
So what I would suspect is you are still reloading the URL .../app.html#/users/1/details.
Did you take a look at your Network history, in the developer tools (or equivalent)?
The first item should be a GET request, and it will indicate the effective requested URL and the hash if any.