CODEWITHSUNDEEP
node.jsmeteormeteorite
Naor
Naor

Reputation: 24103

meteor real router for multi page apps without JavaScript render

I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">


<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>

  <script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
  <script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
  <script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
  <script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>


<title>myapp</title>
</head>
<body>

</body>
</html>

And this is not what I want. I want page1 route will return me:

<!DOCTYPE html>
<html>
<head>
    My meta tags
</head>
<body>
    page1
</body>
</html>

And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.

Upvotes: 1

Views: 771

Answers (1)

Tarang
Tarang

Reputation: 75975

Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.

To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like

<head>
    <title>xx</title>
</head>

<body>
{{renderPage}}
</body>

<template name="page1">
    <h2>Hello!</h2>
</template>

<template name="page2">
    <h2>Ola!</h2>
</template>

Now you need to define a router in your client side javascript:

Meteor.Router.add({
    '/page1': 'page1',
    '/page2': 'page2'
});

So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>

With the meta tags you need to use javascript to create them. With something like

$('head').append("<meta...");

Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.

Of note is in production mode there will only be 1 script tag.

Upvotes: 2

Related Questions