<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="73940" data-post-id="73940">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gbkbaranee" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gbkbaranee/120/8758_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gbkbaranee
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Your suggestion on decoupling makes good sense. Im a newbie working with Phoenix, Vue SSR. Can you bit more elaborate on the decoupled setup - in crude way I’m thinking of like this:</p>
<ol>
<li>Phoenix as front facing API server - that has the knowledge of invoking the needed ‘N’ Vue components for the requested route</li>
<li>Node based Express server to take Vue components related requests - acting as rendering server(does vue ssr)</li>
<li>There need to be a two way communication path between these servers - may be a web socket. Why? - Phoenix Controllers should be able to call Vue components in some way &amp; the Vue components would call Phoenix back end APIs - to fill section data &amp; render.<br>
Seeking comments on whether this would be a good approach for Phoenix as API server &amp; Node server for Vue SSR.<br>
Would be of great help if someone can shed some light on how to go about on this. Thanks in advance</li>
</ol> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="73940" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/what-should-be-my-front-facing-server-vue-or-phoenix/13060/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-73940" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="73940"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="73944" data-post-id="73944">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bulldog_in_the_dream" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bulldog_in_the_dream
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>With decoupled I was thinking of using Phoenix as a pure API, with no Vue in it whatsoever. This way the backend and the frontend don’t need to know anything about each other’s implementation details, and they can be in different repos. All that connects them is some communication protocol, usually REST.</p>
<p>The advantage of this is the decoupling. You can now make changes in either the frontend or the backend, and as long as you don’t change the communication interface – the API – the other part of your application is not affected.</p>
<p>If you want to do this I suggest you start by builiding a pure API Phoenix app that only serves JSON over rest, no HTML. You do the routing in Vue. All you need is a Phoenix API backend and something like Nuxt.js to give you SSR.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="73944" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/what-should-be-my-front-facing-server-vue-or-phoenix/13060/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-73944" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="73944"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="73994" data-post-id="73994">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tme_317" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tme_317
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m in the process of trying the same thing right now… but with ReasonReact and Next.js doing the SSR instead of Vue/Nuxt.  Phoenix completely decoupled serving as graphql endpoint.  I like the setup as it simplifies the webpack config for code splitting/lazy or async loading limiting the CSR required and it’s fast and efficient for the browser.  I had quite a lot of JS on every page and felt decoupling made sense.</p>
<p>So far so good but sessions/cookies/csrf protection becomes a little trickier as it has to be implemented in the custom Express setup instead of Phoenix.  I know that Nuxt has similar facilities for this as Next but this slowed me down a little bit.</p>
<p>Also you’ll have to understand the lifecycle hooks and whether they are executed server side or client side (or both).  I imagine websockets will be a bit trickier than standard http req/res depending on whether the server or client is subscribing… but haven’t attempted this yet.</p>
<p>Not sure it was worth decoupling yet in terms of time to develop and added server side complexity but seems like a good pattern.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="73994" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/what-should-be-my-front-facing-server-vue-or-phoenix/13060/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-73994" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="73994"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>