I am loading an Angular app in a .NET MVC .cshtml file.
The Angular app is all compiled by the webpack compiler (so it's static content at runtime) and the .cshtml only loads the app.js and an Angular component.
Now the first thing the app does when it loads on the client is go async to the server to get some data (in this case only a small call to get a total count of items).
And that annoys me, because when the page was loaded from the server, that same data was already present, in cache, on that server. So the server gives all JS and HTML to the client, without that 'itemcount' the server already has, and then the client has to go back to the server to get that data.
So what I would like to do is let the server give all the JS and HTML, AND that 'itemcount'. But I do not know how.
I can't inject it in the JS, because that is static. I could inject it into the HTML in a script tag, but the Angular app can't read it then.
So the only thing I could come up with is to generate, on the server, a JS file with the itemcount, and then load that JS file with a script tag, and then the App could also read it because it's a kind of global variable (which design time the Angular app doesn't know, so that kind of doesn't look nice).
Is there a better/nicer approach?
Related
I created an application that some of my pages are rendered on server side, but I realized that something was not going well. I can see that the requested pages rendered as usual on my browser; but I sent a CURL request to my page and the response was stored in a file, mypage.htm, then I opened the mypage.htm, the page was not rendered as expected.
The first reason of why I have chosen SSR is caching the responses into a frontier layer like Nginx or Varnish.
I'd like to know about that does Nextjs provide fully server side rendered pages or does it just joking and playing its role in the industry like an Holy wood star as "Hey I render things on server Side, but things aren't rendered on server side actually!" or i missed something in detail!
Next.js supports 3 methods,
SSR (when you define getInitialProps)
SSG - static site generation, created a static page at BUILD time (when you define getStaticProps)
Static site Re-Generation, creates a static page at BUILD time, and when the data is changes RE generate the static page again (when you define getStaticProps + revalidate field in it)
For more info read this
So what I am trying to do is a bit unusual but I have no other way of getting a specific object. Let's say I have an app running on http://localhost:3000/ and this app embeds another one running on http://localhost:4000/. Inside the second app, I have a nodejs server which renders one index.html file on which I have several styles/scripts attached to. I need to take a value (perhaps using a request) from http://localhost:3000/ and use it in the script file of http://localhost:4000/. So it is like passing a value from nodejs to the DOM somehow. Has anyone achieved something like this before ?
First of all let me tell you what i want to do.
I want to index my Website which is made in Angular JS, for this i had read all documents or articles from google for this kind of purpose.
And what i found is that :
I need to convert my angular js url to friendly url with html5Mode or hashbag mode.
like : http://www.example.com/#/about to http://www.example.com/#!/about or just http://www.example.com/about
using <meta name="fragment" content="!">
So when any crawler will come on my website say that Googlebot will come and it will see my url as http://www.example.com/?_escaped_fragment_=/about so now i need to serve this request to static html page....Right??
Now my question is how can i generate this html static page with php framework and this html should create automatically only after its content is fully loaded means If angular js is loading data with $http request then this html will only generated after all data will loaded in html template.
I can serve this html to crawler only if this can be generated automatically.
I have tested locally by creating some html page manually and check that if request will come with _escaped_fragment_ parameter then it will server that particular static html page.
But i'm not able to find way for that i will create html page for particular angular js request with php framework.
I dont want to use any npm services.I want to create it fully in php and/or any jQuery Plugin.
Apart from needing a server you redirect your escaped fragment requests to, where the server has taken HTML snapshots after the various views have been rendered, which can then be fed to Googlebot, etc, don't forget you'll also need a setting in your existing web server (such as Apache or IIS) to redirect to the new server handling your escaped fragment.
I appreciate you're looking for a PHP solution, and don't want to use an NPM one like the prerender or seoserver packages, but I want to throw an alternative and easier solution your way: Use an existing hosted solution such as https://www.seo4ajax.com/ or https://prerender.io/ instead. They'll host an SEO server for you that can crawl your site, and typically this is free unless you've got a huge data-driven site with more than a few hundred pages. Less load for you, no need to run yet another server, and you get some nice admin panels to look at what crawlers have hit the SEO redirect, etc.
Broadly speaking, you'll need the meta tag in your HTML you mention, and these settings in your AngularJS config:
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
Then some custom redirect settings such as in an .htaccess file if your existing server is Apache, which these sites will give you, and you can copy and paste.
I just started using ExpressJS and Jade and I was sure that everything is server-side but this post makes me a little bit confused(because my site behaves like Client-side scenario): https://stackoverflow.com/a/12291675
I guess that node.js only sends whole site once and then sends JSON data, because the rest is loaded in browser cache?
So it would be helpful if someone describe this mechanism to me.
You can code an express.js app to render jade templates into HTML on the server side and send HTML to the browser. This is the more traditional approach. However, jade is also capable of running in the browser, so your express app can send jade templates (either as jade syntax text or pre-compiled javascript function source code) to the browser and also send JSON data to the browser and let the browser render the jade template plus JSON data into HTML to be inserted into the DOM. Both are possible. Neither are prescribed by express or jade. It's your choice.
I'm serving a one page app. The app always needs to request initial data from the server once it's loaded.
Is there anyway to dynamically serve data with the initial asset load of css/html/javascript, without rendering it in the html?
Sending a js object with the data so we don't need to ping the server?
inserting a script tag? adding a dynamically created js file to the asset load?
A little bit lost, any help would be really appreciated.
In my opinion, the best way to serve dynamic content from the Node.js server to the client is to use socket.io.
If you don't wanna use socket.io, you can try to create a dynamic page that acts different on the Node.js server, and use XMLHTTPRequests to receive the data.